Vue的一些知识要点

  • 计算属性和过滤器都需要把value值在return出去,
    data
    props
    propsData
    computed
    methods
    watch这些是数据可以直接使用
    变异方法(修改原有的数据)
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
    这些只是修改原有数据而已
    替换数组(会生成新的数组)
  • filter()
  • contact()
  • slice()slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。
    其实都是一些js原生API

注意事项

由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
1,当你利用索引直接设置一个数组项时,例如vm.items[indexOfItem] = newValue
2.当你修改数组的长度时,例如:vm.items.length = newLength
举个例子:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题,你可以使用 splice

vm.items.splice(newLength)

总结方法关于修改响应式数据

  • Vue.set(vm.items, indexOfItem,newValue)
  • vm.$set(vm.items, indexOfItem, newValue)
    参数一表示要处理的数组名称
    参数二表示要处理的数组的索引
    参数三表示要处理的数组的值
var vm = new Vue({
	el: '#app',
	data(){
	return {
		list: ['apple', 'pear', 'cherry'],
		info: {
			name: 'jack',
			age: 18
		}
})
Vue.set(vm.list, 2, 'watermelon') or 
vm.$set(vm.list, 1, 'lemon')

vm.$set(vm.info, 'gender', 'male')

对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如,对于:
vm.$set(vm.info, 'gender', 'male')你也可以通过Vue.set(vm.info, 'gender', 'male'),vm.$set 实例方法,它只是全局 Vue.set 的别名

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值