vue.set有什么用

互联网 20-11-12

vue.set的作用：1、通过【Vue.set】方法设置data属性，代码为【Vue.set(data,'sex', '男') 】；2、使用【vm.$set】实例方法，代码为【var key = 'content';】。

【相关文章推荐：vue.js】

vue.set的作用：

当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <script src="https://static.jb51.net/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app">  姓名：{{ name }}<br>  年龄：{{age}}<br>  性别：{{sex}}<br>  说明：{{info.content}} </div> <!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> <script> var data = {  name: "php中文网",  age: '3',  info: {   content: 'my name is test'  } } var key = 'content'; var vm = new Vue({  el:'#app',  data: data,  ready: function(){   //Vue.set(data,'sex', '男')   //this.$set('info.'+key, 'what is this?');  } }); data.sex = '男'；//不生效 </script> </body> </html>

运行结果：

姓名：php中文网 年龄：3 性别： 说明：my name is test

在age及name都有get和set方法,但是在sex里面并没有这两个方法，因此，设置了sex值后vue并不会自动更新视图；

解决方法：

<script> var data = {  name: "脚本之家",  age: '3',  info: {   content: 'my name is test'  } }  var key = 'content'; new Vue({  el:'#app',  data: data,  ready: function(){   Vue.set(data,'sex', '男');   this.$set('info.'+key, 'what is this?');  } }); </script>

1、通过Vue.set方法设置data属性，如上：

Vue.set(data,'sex', '男')

2、您还可以使用 vm.$set实例方法，这也是全局 Vue.set方法的别名:

var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式 this.$set('info.'+key, 'what is this?'); //或 this.$set('info.content', 'what is this?');

相关免费学习推荐：JavaScript（视频）

以上就是vue.set有什么用的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： vue.set

vue.set有什么用

相关资讯

标签推荐