全局API之Vue.set 监听数据层的数据变化

2022-11-21 178

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 全局API之Vue.set 监听数据层的数据变化

全局API之Vue.set 监听数据层的数据变化

Vue.set` Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。

Vue.set用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

如果数据源是数组

第一个参数是数组，第二个是索引，第三个是索引对应的值

格式：this.$set(target,index,value)

格式1：this.$set(this.数组名,索引,值)

格式2：this.$set(this.数组名.push("添加的值"))

例题练习

要求：点击一下添加按钮，就会在数组最后一位的基础上加1，添加到数组里，并实时显示到页面上

<!--点击一下添加按钮，就会在数组最后一位的基础上加1，添加到数组里，并实时显示到页面上-->
<body>
    <div id="app">  
        <button @click="adds">添加</button>  
        <button @click="update">修改</button>
        <p v-for="value in itme"> {{value}}</p>  
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                num:2,
                itme:[1,2]
            },
            methods:{
              adds(){
                  this.num++
                  this.$set(this.itme.push(this.num))
              },
              update(){
 //把数组itme下标为0的值修改成了"数组下标为0的变成了我！"
      this.$set(this.itme,0,"数组下标为0的变成了我！")
              }
            }
        })
    </script>
</body>

如果数据源是对象

第一个参数是对象，第二个是属性名，第三个是属性对应的值

格式：Vue.set(target,"key",value)

格式1：Vue.set(vm.对象名,"对象属性",对象值)

格式2：this.$set(this.对象名,"对象属性",对象值)

例题练习

要求：点击一下修改按钮，就会更改对象里的数据，并实时显示到页面上

<!--点击一下修改按钮，就会更改对象里的数据，并实时显示到页面上-->
<body>
    <div id="app">  
        <button @click="update">修改</button>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>{{stundent.name}}</td>
                <td>{{stundent.sex}}</td>
                <td>{{stundent.age}}</td>
            </tr>
        </table>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                stundent:{
                name:"张三",
                 sex:"女",
                 age:18
               }
            },
            methods:{
              update(){
                  //使用this一定要加上$符号
                 this.$set(this.stundent,"name","李四")
                 //Vue不用加$符号，vm就是本题的vue对象
                 Vue.set(vm.stundent,"sex","男")
                 Vue.set(this.stundent,"age",30)
              }
            }
        })
    </script>
</body>