Vue实现购物车的全选、单选、显示商品价格代码实例

<td>{{dateil.detailDatetime}}</td>
<td>
<button type="button" id="but" @click="del(dateil.detailId)" class="btn btn-danger">删除</button>
</td>
</tr>

</tbody>

</table>
<div v-else style="font-size: 25px;text-align: center; margin-top: 300px;height: 100px;">购物车空空如也，请先去购买商品~</div>
<div id="label_btn">
<span><label>已选商品<a>{{count}}</a>件，共</a>￥{{price}}</a>元 数组{{checked}}</label>

</span>
<span><button type="button" id="btn-close" @click="jiesuan()" class="btn btn-danger">结算</button></span>
</div>
<!--结算按钮-->

</div>

Vue中的数据应该这样写

var vue = new Vue({
        el: '#a',
        data: {
          list: [],
          checkall: false,
           checked: [],
           price:0,
           count:0,
        }

js:

checkAll: function() {
            /**
            *控制全选反选
            */
            var _this = this
            //true的时候是全选，false是不选
            if(this.checkall) {
              // 实现反选，按钮选中时 实现了反选，列表为空
              this.checked = []              this.price=0;
              this.count=0;
            } else {
              // 实现全选
                this.price=0;
              this.count=0;
              this.checked = []              this.list.forEach(function(dateil) {
                _this.price+=parseInt(dateil.detailProductprice);
                _this.count+=parseInt(dateil.detailProductnum);
                _this.checked.push(dateil.detailId)
              })
            }
            if(this.checked.length === this.list.length) {
              this.checkall = true
              // console.log(this.checkall)
              // console.log(this.checked)
            }
          }

        /**
           * 当单选框选中时
           */
          checkAll: function() {
            var _this = this
            //true的时候是全选，false是不选
            if(this.checkall) {
              // 实现反选，按钮选中时 实现了反选，列表为空
              this.checked = []              this.price=0;
              this.count=0;
            } else {
              // 实现全选
                this.price=0;
              this.count=0;								 
 2/3   首页 上一页 1 2 3 下一页 尾页