数组能做到响应式的方法:
*push():在数组末尾添加元素(可多个)
*pop():删除数组末尾元素
*shift():删除数组第一个元素
*unshift():在数组最前面添加元素(可多个)
*splice():删除,插入,替换
*sort():排序
*reverse():反转
注意: 通过索引值修改数组中的元素 不是响应式的。this.movies[0]=‘海王’
由于vue内部没有监听通过索引值修改数组元素,所以不会刷新页面。
建议使用splice替换元素。
或者使用Vue.set(this.movies, 0,‘海王’) //set(要修改的对象,索引值,修改后的值)
过滤器:
{{item.price | showPrice}}
filters: {
showPrice(price) {
return ‘$’ + price.toFixed(2)
}
}
高阶函数:
*filter中的回调函数有一个要求:必须返回一个boolean值,对数组中元素进行过滤
当返回true时,函数内部会自动将这次回调的n加入到新的数组中,
当返回false时,函数内部会过滤掉这次的n。
let newNums = nuns.filter(function(n){
return n < 100
})
*map:对数组中元素进行相同操作
let new2Nums = nuns.map(function(n){
return n * 2
})
*reduce: 对数组中所有元素进行汇总
let total = nuns.reduce(function(pre, n){
return pre + n
}, 0)
链式调用:
let total = let newNums = nuns.filter(function(n){
return n < 100
}).map(function(n){
return n*2
}).reduce(function(pre,n){
return pre + n
}, 0)
v-model: 表单数据双向绑定
网友评论