对原data数据进行修改》

zimingyo

已于 2022-09-18 11:24:34 修改

阅读量1.2k

点赞数

分类专栏： Vue初文章标签： javascript vue.js 前端

于 2022-09-12 22:20:01 首次发布

本文链接：https://blog.csdn.net/zimingyo/article/details/126821815

版权

Vue初专栏收录该内容

24 篇文章 0 订阅

订阅专栏

作用：当我们编写好一个vue项目后，倘若要对data中的进行增添对象等操作，我们可以更加方便的完成

Vue.set(target,'属性名',值)
vm.$set(target,'属性名',值)

<body>
    <div id="app">
        <p>{{name}}</p>
        <div v-for="(val,k) in people" :key="k">{{k}}:{{val}}</div>
        <button @click="add()">添加</button>
    </div>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                name:'wzm',
                people:{
                    age:22,
                }
            },
            methods:{
                add(){
                    // Vue.set(this.people,'sex','男');
                    this.$set(this.people,'sex','男')
                }
            }
        })
    </script>
</body>

图1
在这里插入图片描述

图2
在这里插入图片描述

对data中的数组操作

<body>
    <div id="app">
        <ul v-for="(val,k) in arr" :key="k">
            <li>{{k}}:{{val}}</li>
        </ul>
        <button @click="add()">添加</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                arr:['bn','nm','jhg']
            },
            methods:{
                add(){
                    //添加数组
                    // this.arr.push('wzm')      //在数组最后面添加数组
                    this.arr.unshift('wzm')     //在数组最前面添加数组

                    //替换（修改）
                    // Vue.set(this.arr,0,'wzm')
                    // this.arr.splice(0,1,'wzm')   

                }
            }
        })
    </script>
</body>

效果图
在这里插入图片描述
对data中数组的对象进行修改

<body>
    <div id="app">
        <ul v-for="(p,k) in arr" :key="k">
            <li>{{p.name}}-{{p.age}}</li>
        </ul>
        <button @click="add()">添加</button>
        <button @click="modify()">修改</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                arr:[{name:'wzm',age:22},{name:'lzy',age:18}],

              
            },
            methods:{
                add(){
                    this.arr.push({name:'wy',age:21})
                },
                modify(){
                    // Vue.set(this.arr[0],"name",'nn')
                    // Vue.set(this.arr[0],'age',16)
                    this.arr[0].name='nm'; 
                }
            }


        })
    </script>
</body>

Vue监视数据的原理

vue会监视data中所有层次的数据
如何监测对象中的数据
通过setter实现监视，且要在new Vue时就传入要监测的数据
(1) 对象中后追加的属性，Vue默认不做响应式处理
(2) 如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
如何监测数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了两件事
(1) 调用原生对应的方法对数组进行更新
(2) 重新解析模板，进而更新页面
在Vue修改数组中的某个元素一定要用如下方法
(1) 使用这些API：push()，pop()，shift()，unshift()，splice()，sort()，reverse()
(2) Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性