如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
<>强业务介绍:模拟后台数据向DOM树上遍历数据,再向数据里添加状态属性,根据状态改变显示图片,默认nochecked.png,点击时改变状态。显示checked.png
<强> DOM树
& lt; div类=癱artContent”: class=" {“bg”:状态==2}")=?val关键)imgListData”: id=肮丶北?
& lt; div类="选择"比;
! [](. ./img/radio-checked.png)/资产
! [](. ./img/radio-nochecked.png)/资产
& lt;/div>
……
& lt;/div>
<强>模拟数据
数据(){
返回{
responseData:中(
{“id”:“1”,“名字”:“女装”,“价格”:115年,“num”: 1、“照片”:“. ./静态/img/1. jpg”},
{“id”:“2”,“名字”:“男装”,“价格”:110年,“num”: 1、“照片”:“. ./静态/img/2. jpg”},
{“id”:“3”,“名字”:“童装”,“价格”:118年,“num”: 2,“照片”:“. ./静态/img/3. jpg”}
),
imgListData: []
}
},
<强>向原数据添加新属性地位
创建(){
this.allDataList ()
}，
方法:{
allDataList () {
(让val this.responseData) {//val.status=false;//写这个有问题
美元。集(val,“状态”,假)//此处为重点
this.imgListData.push (val)
}
console.log (this.imgListData)
}
<强>点击事件(根据索引改变当前属性的状态)
选择(索引){
如果(this.imgListData(指数).status) {
(指数)this.imgListData .status=false;
其他}{
this.imgListData(指数).status=true
}
},
输出发现属有状态性,状态也由假改为了没错,但是就是样式要刷新一下才能显示。把里面的属性仔细看一遍原来的地位没有获?设置方法。错误展示:
把val.status=false;改为。美元集(val,“状态”,假)问题就解决了。
以上这篇vue设置美元给数据赋值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
