提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:这里可以添加本文要记录的大概内容:
计算总价 watch computed reduce 修改数组对象中的某个值
提示:以下是本篇文章正文内容,下面案例可供参考
计算总价
1.forEach()
this.list[index].status = !item.status
this.allPrice = 0
this.list.forEach((it,idx)=>{
if(it.status==true){
this.allPrice = this.allPrice + it.price * it.num
}
})
let sum=0
this.list.filter((item)=>{sum=sum+item.price*item.num})
this.allPrice=sum
return this.allPrice
3 reduce()
computed: {
getAllPrice() {
return this.list.filter(it => it.status).reduce((acc, it) => acc + it.price * it.num, 0)
}
computed
computed 计算属性通常适合做一些映射、多对一时进行的操作
<view>{{reverse}}</view>
str:'123456',
computed:{
reverse(){
return this.str.split('').reverse().join('')
}//654321
watch
<input type="text" v-model="word">
word='word'
watch:{
word(newVal, oldVal) {
console.log('最新值是:'+newVal,"原来的值是:"+ oldVal);
}
},
复杂数据类型这么写监听不到
list:{
deep:true, // 开启深度监听 专门对付复杂数据类型
immediate:true, // 首次监听
handler:(newValue, oldValue)=>{
// console.log('list新值:',newValue, 'list旧值',oldValue);
}
}
reduce()
array= [1, 2, 3, 4];
array.reduce(
(acc,item) => acc=acc+item,
0
);//10
修改数组对象中的某个值
通过索引
this.list[index].status = true