vue数组和对象方法

Posted 2021-02-12 zsj-02-14

变异方法：会改变原始数组

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

非变异方法：不会改变原始数组，但是会返回一个新数组

• fliter()
• slice()
• concat()

vue不能检测变动的数组

利用索引值直接设置内容时 vm.items[indexOfItem] = newValue；

修改数组的长度时 vm.items.length = newLength；

//这种写法并不能实时检测到变化
var vm = new Vue({
  data: {
    items: [‘a‘, ‘b‘, ‘c‘]
  }
})
vm.items[1] = ‘x‘ 
vm.items.length = 2 
//下面方法可以实时触发更新刷新
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)

vue不能检测对象属性的添加和删除

//  不是响应式的，不能检测到变化
var vm = new Vue({
  data: {
    a: 1
  }
})
vm.b = 2
//实时响应的
var vm = new Vue({
  data: {
    userProfile: {
      name: ‘Anika‘
    }
  }
})
//添加age属性
Vue.set(vm.userProfile, ‘age‘, 27)
vm.$set(vm.userProfile, ‘age‘, 27)

为已有对象赋予多个新属性   可以使用Object.assign() 或_.extend()

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: ‘Vue Green‘
})

数组的过滤和排序   如果我们想要一个数组过滤或排序后的数据，并且不改变原始数组，可以使用计算属性

例：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

如果计算属性不适合用，还可以使用method方法

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

参考地址：https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95