vue实现购物车功能
根据增加商品数量、减少商品数量、移除商品动态更新总价格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="css/shop.css">
</head>
<body>
<div id="app">
<!--template是一个字符串模板，以list的长度判断-->
<template v-if="list.length">
<table>
<thread>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thread>
<tbody>
<!--v-for=“list in lists”:从lists这个集合里面遍历出的每一项list-->
<tr v-for="(item,index) in list">
<!--v-for里面有三个参数
<div v-for="(value, name, index) in object">
可选项：
{{ index下标/索引 }}. {{ name键 }}: {{ value值 }}
</div>
index+1是因为list下标从0开始
-->
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<!--@click是语法糖写法
：disabled也是v-bind的语法糖写法
item.count===1：购物车数量减到1就禁用此按钮
index：传入当前行的index
-->
<button @click="handleReduce(index)" :disabled="item.count ===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<!--这里是用的computed属性计算总价格-->
<div>总价：￥{{totalPrice}}</div>
</template>
<!--如果list长度为0显示此信息-->
<div v-else>购物车为空</div>
</div>
<script src="../js/vue.min.js"></script>
<script src="js/shop.js"></script>
</body>
</html>
js
let app = new Vue({
el: '#app',
data: {
list: [
{
id: 1,
name: 'Huawei',
price: 6188,
count: 1
},
{
id: 2,
name: '锤子',
price: 5888,
count: 1
},
{
id: 3,
name: '荣耀',
price: 6000,
count: 1
}
]
},
//计算
computed: {
totalPrice: function (){
//总价格
let total = 0;
for(let i=0;i<this.list.length;i++){
let item = this.list[i];
//数量*价格
total += item.price * item.count;
}
//正则表达式，每3位添加","作为分割符
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');}
},
methods: {
/*
* 商品减减方法
* param： index 当前商品索引
* */
handleReduce: function(index){
//如果
if (this.list[index].count === 1) return;
this.list[index].count--;
},
/**
* 商品添加方法
* @param index
*/
handleAdd: function (index){
this.list[index].count++;
},
/**
* 商品移除方法
* @param index
* splice方法可以用来对js的数组进行删除，添加，替换等操作
* 删除功能，第一个参数为第一项位置，第二个参数为要删除几个
*/
handleRemove: function (index){
this.list.splice(index,1);
}
}
})
css
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}