<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车示例</title>
<style>
table{
border: 1px solid;
width: 500px;
border-collapse: collapse;
text-align: center;
}
td, th{
border: 1px solid #d4d4d4;
min-width: 24px;
}
button{
cursor: pointer;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table >
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
<th>全选<input type="checkbox" @click="checkAll()"></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)" :disabled="item.count===100">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
<td><input type="checkbox" :checked="item.check===true" @click="handleSinleCheck(index)"></td>
</tr>
</tbody>
</table>
<div>总价:￥{{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
</body>
<script src="../../vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
list: [
{"id": 1, "name": 'iphoneXr', "price": 5555, "count": 1, 'check': false},
{"id": 2, "name": 'iphoneX', "price": 5055, "count": 1, 'check': false},
{"id": 3, "name": 'iphone11', "price": 6055, "count": 1, 'check': false},
]
},
computed: {
// 总价
totalPrice: function () {
var total = 0;
for(var i=0; i<this.list.length;i++){
if(this.list[i].check === true){
var item = this.list[i];
total += item.price * item.count;
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
}
},
methods: {
// 处理商品数量 减
handleReduce: function (index) {
if(this.list[index].count===1) return;
this.list[index].count --;
},
// 加
handleAdd: function (index) {
if(this.list[index].count===100) return;
this.list[index].count ++;
},
// 移除商品
handleRemove:function (index) {
this.list.splice(index, 1);
},
// 全选
checkAll: function () {
for(var i=0; i<this.list.length; i++){
this.list[i].check= !this.list[i].check;
}
},
// 单选
handleSinleCheck: function (index) {
this.list[index].check = !this.list[index].check;
}
}
})
</script>
</html>JavaScript
效果：
js里有个三元运算符 ?:
作用是判断?前的语句是否为真，为真则执行中间的语句，否则执行后面的语句
如:confirm("你是谁？")?alert("你是光"):alert("你是电！")
评论列表
已有0条评论