哈喽，今天要说的就是怎么搞定网页界面，重点说说Vue.js这神器——响应式属性。简单说，它能让页面跟着数据变，超好用的！不过有时还是得咱们动手调整，这时就需要Vue.set函数了。别怕不会用，这玩意儿是Vue里面自带的，就是用来加响应式属性的。下面就来详细教你们怎么用它和动态添响应性属性。
Vue.set函数的基本用法
用Vue.js设定属性超简单？直接告诉它你要标记什么，还有属性值，数据就自动更新了！比如，我们创建个叫vm的Vue实例，然后定义个叫Obj的对象，加上name和age这俩内容。接着，如果又想在Obj里添加个新的gender属性并赋为’男’，那就用set方法来搞定！这样以后新添的属性也能跟着数据一起变。
在实际操作中，我们可以这样使用Vue.set函数：
javascript 来，咱们就在VirtualMachine（VM）的Objeck那里加个男选项呗。只不过把里面的'性别'(Gender)改成'男性'(Male)就行了，简单得不能再简单了，你只需敲敲那个vue.set(vm.obj,'gender','男')，搞定！// 创建一个Vue实例 var vm = new Vue({ data: { obj: { name: '张三', age: 18 } } }) // 动态添加一个响应式属性 Vue.set(vm.obj, 'gender', '男') // 输出结果 console.log(vm.obj.gender) // 男我给obj加了个’性别’属性，现在变成男生！赶紧试下vm.obj.gender会显示啥？这样就能轻松搞定新属性，好方便，以后还能用得到的。
Vue.set函数的局限性
别弄混了要是想给新的属性添加响应式效果，千万别瞎用Vue.set。你知道吗？Vue.js在开始的时候，只认它原本就有的属性。所以，要用Vue.set的话，得保证目标对象和要加的属性都准备好了哟~
小伙伴们知道吗？Vue.js里面还有$set这个好东西，跟Vue.set差不多，只不过$set可是Vue.js自带有一个不需要咱们再去新建啥子新例子。而且，用上它的话，可以给已有的数据加上响应式属性，超级实用有木有！在实际操作中，咱们就根据具体情况选择适合自己的那款，真的会便利好多。
Vue.$set方法的使用方法
Vue.$set看起来是不是有点麻烦？没事，这儿有几个小贴士教你怎么轻松玩转它：
// 创建一个Vue实例 var vm = new Vue({ data: { obj: { name: '张三', age: 18 } } }) // 动态添加一个响应式属性 vm.$set(vm.obj, 'gender', '男') // 输出结果 console.log(vm.obj.gender) // 男行，照我说的做就对了：先把vm.obj的性别设成男性，然后用咱们的神奇工具Vue.$set轻而易举地搞定它！
直接说，用Vue给OBJ对象的’gender’属性设个’男’,就搞定！关于$set和Vue.set,其实俩儿都能用，就是换了种使法儿。选啥看心情呗，也得看项目需求哈。最终就是要添这个响应式属性。
总结
真正，Vue.set和Vue.$set这俩工具就是vue.js给咱动态加属性的小助手，使着它们可真省心～不过记住只能在定义初始数据时用到，新属性就能跟着变化了，数据一动，页面也会跟着变！
搞懂Vue.js的Vue.set和Vue.$set这两个神器就能随心所欲操控咱们的数据了，无论何时何地都能用得溜。掌握了它们，不仅工作效率提高不少，也更容易理解Vue.js到底是怎么回事。希望我说的这些能帮你迅速搞定Vue.js喔～有不明白的地方尽管问。
评论0