欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

computed--实时计算属性

程序员文章站 2022-03-21 20:34:44
项目:https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/07-shoppingCart.md 实时计算属性的computed功能,实时计算的是属性,只不过是函数的写法,data里面就不用再声明了。computed里面可 ......

项目:https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/07-shoppingCart.md

实时计算属性的computed功能,实时计算的是属性,只不过是函数的写法,data里面就不用再声明了。computed里面可以放置一些业务逻辑代码,一定记得return。

实例:

computed--实时计算属性

实现点击全选功能

<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就自动勾选了。 computed--实时计算属性