<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="utf-8"?/>
<title>vue購物車</title>
<link?rel="stylesheet"?>
????</head>
????<body>
????????<div?id="app"?v-cloak>
<template?v-if="list.length">
<table?class="table?table-hover?talbe-striped">
<tr><input?type="checkbox"?@click="checkedAll"?v-model="allCheck"></tr>
<tr>{{allCheck}}{{checkModel}}</tr>
<tr>商品名稱</tr>
<tr>單價</tr>
<tr>數(shù)量</tr>
<tr>操作</tr>
<tr?v-for="(item,index)?in?list">
<td><input?type="checkbox"?v-model="list[index].isChecked"?@click="isAllCheck"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.isChecked}}</td>
<td>
<button?@click="reduceNum(index)">-</button>
{{item.count}}
<button?@click="addNum(index)">+</button>
</td>
<td>
<button?@click="removeItem(index)">移除</button>
</td>
</tr>
</table>
<div>總價:￥{{totalPrice}}</div>
</template>
<div?v-else>購物車為空，現(xiàn)在去選購吧！</div>
????????</div>
????</body>
????
<script?type="text/javascript"?src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
<script?src="index.js"></script>
</html>var?app?=?new?Vue({
el:"#app",
data:{
allCheck:false,
list:[
{id:1,name:'小米6',price:2499,count:2,isChecked:false},
{id:2,name:'充電寶',price:25,count:6,isChecked:false},
{id:3,name:'榮耀10',price:2699,count:4,isChecked:false},
{id:4,name:'蘋果X',price:8499,count:3,isChecked:false},
],
checkModel:0
},
computed:{
totalPrice:function(){
var?total?=?0;
for(var?i?=?0;i?<?this.list.length;i++){
var?item?=?this.list[i];
if(item.isChecked){
total?+=item.price?*?item.count;}
}
return?total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
reduceNum:function(index){
if(this.list[index].count?===?1)?return;
this.list[index].count--;
},
addNum:function(index){
this.list[index].count++;
},
removeItem:function(index){
this.list.splice(index,1);
},
checkedAll:function(){
for(var?i?=?0;i?<?this.list.length;i++){
this.list[i].isChecked?=?!this.allCheck;
}
},
isAllCheck:function(){
}
}
})需要添加一個全選功能，只有勾選的商品計入總價，所有商品勾選上，全選也勾選
有誰能在這個基礎(chǔ)上完善這個功能??？我是十分感謝了
西蘭花偉大炮
2017-12-11 23:53:42
