效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul @click="handler">
<li v-for="(item,index) of cart">
<input type="checkbox" v-model="item.isChecked">
{{item.pid}} |
{{item.pname}} |
￥{{item.price.toFixed(2)}} |
<!--//style="margin-right: 10px;" -->
<!-- 用事件自定义属性存储了加减的值1或-1，也存储了下标 -->
<button :data-i="index" :data-n="-1">-</button>{{item.count}}<button :data-i="index"
:data-n="1">+</button> |
小计：￥{{(item.price*item.count).toFixed(2)}}
<button :data-i="index">×</button>
</li>
<li>总价：￥{{total.toFixed(2)}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
cart: [
{ pid: 1, pname: "小米", price: 3399, count: 2, isChecked: false },
{ pid: 2, pname: "华为", price: 4399, count: 1, isChecked: false },
{ pid: 3, pname: "苹果", price: 5399, count: 1, isChecked: false }
]
},
methods: {
handler(e) {
if (e.target.nodeName == "BUTTON") {
if (e.target.innerHTML == "×") {
this.cart.splice(e.target.dataset.i, 1);
} else {
// 拿到的是字符串，要转为数字
var index = e.target.dataset.i;
var n = parseInt(e.target.dataset.n);
this.cart[index].count = this.cart[index].count + n;
if (this.cart[index].count == 0) {
this.cart.splice(index, 1)
}
}
}
},
},
computed: {
total() {
var total = 0;
for (var p of this.cart) {
if (p.isChecked == true) {
total += p.price * p.count;
}
}
return total;
}
}
})
</script>
</body>
</html>
1152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
