表格的样式有点丑，可以自行调整一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue-dev/dist/vue.js"></script>
<style>
table{
width:600px;
height:500px;
padding:0;
border-collapse: collapse;
}
td{
width:100px;
}
</style>
</head>
<body>
<div id="app">
<div v-if="books.length>0">
<table border="2px">
<th> </th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
<tr v-for="(book,index) in books">
<td>
{{index}} <!-- 序号 -->
</td>
<td>{{book.name}}</td>
<td>{{book.pushDate}}</td>
<td>{{book.price}}</td>
<td>
<button @click="redBtn(index)">-</button> <!--点击按钮，对应的buyNum减一 -->
{{book.buyNum}}
<button @click = "addBtn(index)">+</button> <!--点击按钮，对应的buyNum加一 -->
</td>
<td>
<button @click = "remove(index)">移除</button> <!--点击按钮，移除对应数据 -->
</td>
</tr>
<tr>
<td colspan="6">总价:{{price}}</td>
</tr>
</table>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script>
const app = new Vue({
el : '#app',
data : {
books :[{
name: '《算法导论》',
pushDate : '2006-9',
price : '￥85.00',
buyNum : 1
},{
name: '《UNIX编程艺术》',
pushDate : '2006-2',
price : '￥59.00',
buyNum : 1
},{
name: '《编程珠玑》',
pushDate : '2008-10',
price : '￥39.00',
buyNum : 1
},{
name: '《代码大全》',
pushDate : '2006-3',
price : '￥128.00',
buyNum : 1
}],
},
methods : {
addBtn(index){
this.books[index].buyNum++;
},
redBtn(index){
if(this.books[index].buyNum <=1){
alert("购买数至少大于等于1");
}else{
this.books[index].buyNum--;
}
},
remove(index){
this.books.splice(index,1); //移除
}
},
computed:{
price(){
let sum=0;
// ===普通for循环实现遍历===
// for(let i=0;i<this.books.length;i++){
// sum+=(parseFloat(this.books[i].price.slice(1))*this.books[i].buyNum);
// }
// === for in实现遍历
// for(let i in this.books){
// sum+=(parseFloat(this.books[i].price.slice(1))*this.books[i].buyNum);
// }
// === for of实现遍历
// for(let item of this.books){
// sum+=(parseFloat(item.price.slice(1))*item.buyNum);
// }
// === reduce实现遍历===
//slice可用其他方法代替，不要忘记括号后面的0，这是对prevalue进行初始化为0的操作，否则计算会有问题
sum = this.books.reduce((prevalue,item)=>(prevalue+parseFloat(item.price.slice(1))*item.buyNum),0);
return '￥'+ sum.toFixed(2); //toFixed作用：保留两位小数
//编程范式：命令式编程/声明式编程/
//编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
}
}
})
</script>
</body>
</html>
版权声明：本文为qq_41795427原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。