标签：count index price 购物车 book books id 书籍
一. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div id="app">
<div v-if="books.length > 0">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book, index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.publishDate}}</td>
<!-- 过滤器(类似于linux的管道: ps -ef | grep rtsp) -->
<td>{{book.price | getPrice}}</td>
<td>
<!-- 数量小于等于1的时候，不能点击 -->
<button @click="decrement(index)" v-bind:disabled="book.count <= 1">-</button>
{{book.count}}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="removeHandle(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价: {{totalPrice | getPrice }}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
</body>
<script type="application/javascript" src="js/vue.js"></script>
<script src="main.js"></script>
</html>
二. main.css
table {
border: 1px solid #efefef;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px 16px;
border: 1px solid #efefef;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
三. main.js
const app = new Vue({
el: "#app",
data: {
books: [
{
"id": 1,
"name": "《算法导论》",
"publishDate": "2006年9月",
"price": 85.00,
"count": 1
},
{
"id": 2,
"name": "《编程艺术》",
"publishDate": "2006年2月",
"price": 59.00,
"count": 1
},
{
"id": 3,
"name": "《编程珠玑》",
"publishDate": "2006年7月",
"price": 39.00,
"count": 1
},
{
"id": 4,
"name": "《代码大全》",
"publishDate": "2006年3月",
"price": 128.00,
"count": 1
}
]
},
filters: {
getPrice(price){
return "￥" + price.toFixed(2);
}
},
methods: {
increment(index) {
this.books[index].count++;
},
decrement(index) {
this.books[index].count--;
},
removeHandle(index) {
this.books.splice(index, 1);
}
},
computed: {
totalPrice() {
let total = 0;
for(let book of this.books){
total = total + book.count * book.price;
}
return total;
}
}
})
四. 结果
标签：count,index,price,购物车,book,books,id,书籍 来源： https://blog.csdn.net/qinqinde123/article/details/120116630
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。