vue set使用方法demo

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
    <div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button class="btn" @click="btn2Click()">动态赋值</button><br/><br/>
    <button class="btn" @click="btn3Click()">为data新增属性</button>
</div>
</body>
<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'})
                console.log(this.items)
            },
            btn3Click:function(){
                console.log("这是没有改变之前的")
                console.log(this.items)
                var itemLen=this.items.length;
                alert(itemLen)
                Vue.set(this.items,itemLen,{message:"Test add attr",id:'99'});
                console.log("改变之后")
                console.log(this.items)
            }
        }
    });
    </script>
</body>
</html>
vue set使用方法demo

推荐阅读更多精彩内容
