项目：https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/07-shoppingCart.md
实时计算属性的computed功能，实时计算的是属性，只不过是函数的写法，data里面就不用再声明了。computed里面可以放置一些业务逻辑代码，一定记得return。
实例：
实现点击全选功能
我要评论<a href="javascipt:;" @click="toggleCheckAll">
<span class="checkbox-btn item-check-btn" v-bind:class="{'check':checkAllFlag}">
<svg class="icon icon-ok"><use xlink:href="#icon-ok"/></svg>
</span>
<span>Select all</span>
</a>
export default {
data(){
return {
checkAllFlag:false // 控制全选
}
},
methods:{
toggleCheckAll(){ // 全选和取消全选
this.checkAllFlag = !this.checkAllFlag; // 取反
this.cartList.forEach((item)=>{
item.checked = this.checkAllFlag;
})
axios.post('/users/editCheckAll',{
checkAll:this.checkAllFlag
}).then((response)=>{
let res = response.data;
if(res.status=='0'){
console.log("update suc");
}
})
}
}
}
在点击select All全选之后，向后端请求，修改所有商品的选中状态，这样页面刷新之后还是这个状态。
但是select All的选择状态并没有存储到数据库中保存，所以页面刷新之后所有商品是选中的，但是select All 并没有选中。
【解决办法】
这里就要用到实时计算的computed功能
export default {
data(){
return {
// checkAllFlag:false // 控制全选
}
},
computed:{ // 实时计算的是属性，只不过是函数的写法，data里面就不用在声明了
checkAllFlag(){ // 是否全选属性
return this.checkedCount == this.cartList.length; // 勾选的商品种数=购物车商品列表的商品种数时，返回true代表全选。
},
checkedCount(){ // 获取已勾选的商品种数(几种商品已勾选)
var i = 0;
this.cartList.forEach((item)=>{
if(item.checked=='1')i++;
});
return i;
}
},
methods:{
toggleCheckAll(){ // 全选和取消全选
// this.checkAllFlag = !this.checkAllFlag;
// 不能使用取反这种写法了，checkAllFlag是实时计算的属性，如果true取反变成false之后，
还没来得及执行下面的所有商品取消勾选，就实时计算了检测到勾选的商品种数=购物车商品列表的商品种数,就又变成全选了。
var flag = !this.checkAllFlag; // 声明变量取代
this.cartList.forEach((item)=>{
item.checked = flag ?'1':'0';
})
axios.post('/users/editCheckAll',{
checkAll:flag
}).then((response)=>{
let res = response.data;
if(res.status=='0'){
console.log("update suc");
}
})
}
}
}
这样页面一刷新就实时计算了，如果勾选的商品总数=购物车商品列表的商品总数，全选属性checkAllFlag为true，select All就自动勾选了。
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论