vue中set方法

先上一坨代码

<body>
  <div id="app">
    <div v-for="(item, key, index) of userInfo">
      {{item}} --- {{key}} --- {{index}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        userInfo: {
          name: 'pengyidong',
          age: 22,
        }
      }
    })
  </script>
</body>

当我们想在userInfo中添加一条数据的时候，应该怎么操作？

首先我们可以使用vm.userInfo 去设置一个全新的变量。

vm.userInfo = {
    name:'pengyidong',
    age: 22,
    address: '广州'
}

vue提供一个更加简单的set方法，向一个对象中添加数据，当数据改变时，页面也会随之变化。

Vue.set(vm.userInfo,'job','前端')

改变数组数据，页面跟着变化的三种方法

  • 直接改变数组引用

  • 用数组的变异方法

  • 用set方法（包括vue的set和实例的set）

改变对象数据，页面跟着变化的三种方法

  • 改变引用

  • 直接改值

  • 用set方法（包括vue的set和实例的set）

set方法，向一个对象中加数据,当数据发生变化，页面变化

对象：

  • 全局：Vue.set(obj,key,value)

  • vue实例：vm.$set(obj,key,value)

// 全局
Vue.set(vm.userInfo,'job','前端')

// vue实例
vm.$set(vm.userInfo,'job','前端')

数组：

  • 全局：Vue.set(arr,index,value)

  • vue实例：vm.$set(arr,index,value)

userInfo: [1,2,3,4]
// 全局
Vue.set(vm.userInfo,1,5)

// vue实例
vm.$set(vm.userInfo,2,10)

 

 

posted @ 2021-04-05 01:02  倦梦还  阅读(16553)  评论(0)  编辑  收藏  举报