7Vue中的set方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Vue中的列表渲染</title>
</head>
<body>
    <div id="app">
        <div v-for="(item,key,index) of userInfo" :key="index">
            {{item}}---{{key}}---{{index}}
        </div>
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            userInfo:{
                name:"xixi",
                age:22,
                gender:"male"
            }
        }
    })
</script>
</html>

我们现在来改变userInfo的值,通过控制台：

我们可以看到userInfo的值确实改变了，可是页面并没有发生变化。

我们还可以通过改变userInfo的引用来改变页面：

这种方式可以渲染页面。我们还可以使用set方法来改变userInfo的值。同时渲染页面：

set是Vue的方法，也是Vue实例的方法。可以改成vm.$set()。

数组的修改除了如（pop,push。。。）可用以使用set方法，例如：Vue.set(vm.list,1,5)。这是将数组的第二个元素值改为5。如果使用vm.list[1]=5页面不会渲染。vm.$set(vm.list,1,5)也可以。