vue中 Vue.set 的使用

最新推荐文章于 2024-05-09 15:46:58 发布

舔舐岁月伤口

最新推荐文章于 2024-05-09 15:46:58 发布

阅读量622

点赞数

本文链接：https://blog.csdn.net/ln1138932964/article/details/107928577

版权

vue中 Vue.set 的使用

Vue.set(vm.items, indexOfItem, newValue)

1、vm.items ：源数据；
2、indexOfItem : 要修改的数据的键
3、newValue : 要修改的数据

let a = [
    {name:'张三',age:'20',sex:1},
    {name:'李四',age:'21',sex:0},
    {name:'王五',age:'22',sex:1},
]

此时要修改李四的 age 为 19 ，如果直接修改，vue是获取不到的，就需要借助 $set 来手动触发改变。

a[1].age = 19;//此时可以知道修改完后的数据的键是 1 所以：
复制代码
Vue.set(a,1,a[1]);//就可以改了
这时候 a 是源数据， 1 是键， a[1]是修改后的数据
 
Vue.forceUpdate();//也可以用这个方法手动触发视图更改

这里我定义了一个列表数据，我将通过三个不同的按钮来控制列表数据。
调用方法：Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button class="btn" @click="btn2Click()">动态赋值</button><br/>    
    <button class="btn" @click="btn3Click()">为data新增属性</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
    el:"#app2",
    data:{
        items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
        ]
    },
    methods:{
        btn2Click:function(){
            Vue.set(this.items,0,{message:"Change Test",id:'10'})
        },
        btn3Click:function(){
            var itemLen=this.items.length;
            Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
        }
    }
});
</script>
</body>
</html>

舔舐岁月伤口

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中 Vue.set 的使用

vue中 Vue.set 的使用Vue.set(vm.items, indexOfItem, newValue)1、vm.items ：源数据；2、indexOfItem : 要修改的数据的键3、newValue : 要修改的数据let a = [ {name:'张三',age:'20',sex:1}, {name:'李四',age:'21',sex:0}, {name:'王五',age:'22',sex:1},]此时要修改李四的 age 为 19 ，如果直接修改
复制链接

扫一扫