1.购物车画面展示:
2.购物车需要实现的功能:
(1)修改数量以及移除书籍后总价会发生改变;
(2)当一本书籍都没有的时候提示购物车为空,表格消失。
3.逻辑分析:
(1)由于加入购物车的每一行内容都类似,可以用v-for指令将书籍进行遍历添加;
(2)点击加减按钮以及移除按钮总价变化,可以用v-on指令给按钮添加点击事件;
(3)当购物车为空时表格消失,可以用v-show指令的boolean值设为false进行隐藏;
(4)移除功能可以用数组.splice(元素下标,删除的数量)实现
(5)计算总价可以用Vue.js的计算属性computed:{}实现
4.代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
table {
margin: 0px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="cart">
<div v-show="goodsList.length==0">购物车为空</div>
<table width="700px" border="1px" cellspacing="0px" cellpadding="3px" v-show="goodsList.length>0">
<tr>
<th>编号</th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(goods, index) in goodsList">
<td>{{index+1}}</td>
<td>{{goods.name}}</td>
<td>{{goods.date}}</td>
<td>{{goods.price|aaa}}</td>
<td><button @click="goods.count>1?goods.count--:goods.count">-</button>{{goods.count}}<button @click="goods.count++">+</button></td>
<td><button @click="remove(index)">移除</button></td>
</tr>
<tr style="text-align: left;">
<td colspan="6">总价:{{totalMoney|aaa}}</td>
</tr>
</table>
</div>
</body>
<script>
// 实例化Vue对象
const v = new Vue({
el: "#cart",
data: {
goodsList: [
{ name: "《算法导论》", date: "2006-09", price: 85, count: 1 },
{ name: "《UNIX编程艺术》", date: "2006-02", price: 59, count: 1 },
{ name: "《编程珠玑》", date: "2008-10", price: 39, count: 1 },
{ name: "《代码大全》", date: "2006-03", price: 128, count: 1 }
]
},
methods: {
//根据数组的索引移除书籍
remove(index){
this.goodsList.splice(index,1);
}
},
//vue.js的计算属性
computed: {
totalMoney() {
let sum = 0;
for (let goods of this.goodsList) {
sum = sum + goods.price * goods.count;
}
return sum;
}
},
//vue.js的过滤器,把价格统一格式化
filters:{
// 格式:{{totalMoney|aaa}}
// 此时 value 指的是totalMoney
//.toFixed(2):保留两位小数
aaa(value){
return "¥"+value.toFixed(2);
}
}
})
</script>
</html>
5.测试:
(1)点击购买数量按钮,计算总价功能:
(2)移除书籍后总价发送改变:
(3)购物车书籍全部移除后提示购物车为空,隐藏表格: