vue改变data的值,vue能给data添加新的属性吗
本文主要介绍了如何在vue中给数据中的变量添加属性，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
向数据中的变量添加属性vue框架使用mvvm模式。事不宜迟，我直接使用了动态添加属性到数据中响应对象的方法。
给data里面的变量增加属性
vue框架是使用mvvm模式
里面有一个通知机制。如果数据发生变化，它将通过视图进行更新。
这是真的吗？只要我们改变vue中数据的值，dom树就会随时更新
div id=应用程序
保险商实验所
li v-for=(val，idx) in test
{{val}}
/李
/ul
Button @click=add 添加新属性/button
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
测试：{
a:test.a ，
}
}
})
console . log(app . test . a)；//可访问
app . test . a= test . b ；
console . log(app . test . a)；//打印出test.b，视图已经更改。
/脚本
我们可以访问vue实例外部的变量。
您可以通过应用程序直接访问打印测试。助教。
我们要是在这里直接更改呢
app.test.a="test.b "
会发现 视图发生了变化
但是如果我们在这里给app.test加属性，看看行不行。
app . test . b= test . c ；
console . log(app . test . b)；
最后发现页面上加了test.c，这就是vue响应式数据的威力。
所以让我们尝试通过直接从vue实例赋值来添加属性。
方法：{
add:function(){
this . test . b= test . c ；
console . log(this . test)；
}
}
我在界面上创建了一个按钮，添加了一个add方法，并试图通过调用该方法来添加一个新的属性。
打印的数据确实显示在vue的数据中，但在视图中实际上并没有更新。
了解的同学可能知道，vue的双向数据绑定是通过数据劫持结合订阅者——和发布者。一般来说，我们后面直接添加的属性并不在vue的通知机制中，所以无法享受实时监控机制。
但在工作中，我们可能需要向我们的网络添加一些数据，并实时更新它和视图。
我废话不多说直接上方法了
1.通过数组操作
this . test . push({ is active:fasle })；
2.通过全局api $set
这个。$set(this.test， isActive ，fasle)；
3.通过Object.assign()
this.test=Object.assign({}，this.test，{b:test.c})
第一种方法是自己填，特殊情况下可以用。
给data中的响应式对象动态添加属性
数据响应对象动态添加属性。
模板
差异
name:{ { peple . name } } El-button style= margin-left:10px @ Click= set sex 单击以添加性别/el-button
span style= margin-left:20px v-if= this . people . sex
性别：{ { { people . sex } }/span
/div
/模板
脚本
导出默认值{
data() {
返回{
人们：{
名字：“长大”
}
};
},
方法：{
setSex() {
这个。$ set(this . people， sex ， male )；
}
}
};
/脚本
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。