購物車金額計(jì)算通常比較復(fù)雜，利用vue提供的計(jì)算屬性和雙向數(shù)據(jù)綁定可以很輕松的解決問題

這是一個(gè)很丑陋的效果圖

<ul>
    <li v-for="item,index in list" :key="index">
        <div>
            <input type="checkbox" :value="item" v-model="checkgroup"/>
            <span>商品名：{{item.name}}</span>
            <span>數(shù)量：{{item.number}}</span>
            <span>價(jià)格：{{item.price}}</span>
            <button @click="add(item)">+</button>
            <button @click="reduce(item)">-</button>
        </div>
    </li>
</ul>
<p>價(jià)格多少錢：{{money}}</p>

然后再到data里面定義一個(gè)checkgroup的空數(shù)組。然后利用v-model='checkgroup'，然后利用計(jì)算屬性來監(jiān)聽變化。

computed:{
    money(){
        var sum=0;
       for(var i in this.checkgroup){
           sum+=this.checkgroup[i].price*this.checkgroup[i].number;
       }
       return sum;
    }
}

最后加入@click點(diǎn)擊事件即可。

methods:{
    add(item){
        item.number++;

    },
    reduce(item){
        item.number--;
        if(item.number<=0){
            item.number=0;
        }
    }
}