vue中set方法

沃梦达教程前端开发

2023-10-08

先上一坨代码bodydiv id=appdiv v-for=(item, key, index) of userInfo{{item}} --- {{key}} --- {{index}}/div/divscriptvar vm = new Vue({el: #app,data: {userInfo: {name: pengyidong,age: 22,...

先上一坨代码

<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)

沃梦达教程

本文标题为：vue中set方法

上一篇： vuecli2.9.6卸载不掉，解决方案

下一篇： vue基础4（完）

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX