首页前端开发正文

Vue.set的使用

朱绪2020-10-202118Vue.js

这里我定义了一个列表数据,将借助三个不同的按钮来改变列表的数据。

调用方法:Vue.set(target,key,value)

说一下target/key/value分别代表的意思。

target: 要更改的数据源【可以是对象,也可是数组】。

key:要更改的具体数据。

value:重新赋的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <div v-for="item of list" :key="item.id">
            {{item.msg}}
        </div>
        <button @click="btnClick1">动态赋值</button><br>
        <button @click="btnClick2">为data新增属性</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {msg: 'Test one', id: '1'},
                    {msg: 'Test two', id: '2'},
                    {msg: 'Test three', id: '3'}
                ]
            },
            methods: {
                btnClick1(){
                    Vue.set(this.list,0,{msg: 'Test change', id: '666'})
                },
                btnClick2(){
                    var listLen = this.list.length;
                    Vue.set(this.list,listLen,{msg:'Test add',id: listLen})
                }
            }
        })
    </script>
</body>
</html>

这时候页面显示是这样的:

Vue.set的使用

点击第一个按钮,起到的效果是,将Test one改成Test change。

关于btnClick1函数的写法,要注意一下。不要写成this.list[0] = {msg: 'Test change',id: '666'},这样是起不到效果的,不信的话可以试一试。

如果真是这样做的话,会出现一个状况。点击“动态赋值”这个按钮后你在控制台里查看list[0]发现这个数据已经被更改了,但是,从视图上是看不到改变的。

Vue文档对于这个问题是有做说明的,由于JavaScript的限制,Vue不能够检测出数据的改变。所以当我们需要动态改变数据的时候,用Vue.set()吧。

接下来,我再说一下“为data新增属性”那个按钮吧。

点一下这个按钮之前,数组里是三个对象,点了之后,会发现新增了一个对象。

我们不难发现,Vue.set()不单可以修改数据,还可以添加数据呢!