要求：可以實現購買數量增加和減少的操作，還有移除，以及在增加和刪除的時候顯示價格，如果當全部移除時，把購物車為空顯示出來
話不多說，上程式碼
這是html的
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<!-- 這裡的東西是寫死的 -->
<th></th>
<th>書籍名稱</th>
<th>出版日期</th>
<th>價格</th>
<th>購買數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 下面的是變數 -->
<!-- 物件是可以遍歷的 -->
<!-- 我們要寫上一些按鈕啥的 不推薦使用這種 -->
<tr v-for="(item,index) in books">
<!-- <td v-for="value in item">{{value}}</td> -->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<!-- <td>{{getFinalPrice(item.price)}}</td> -->
<!-- 過濾器 -->
<td>{{item.price | showPrice}}</td>
<td>
<!-- :disabled="true"布林值 -->
<!-- 當按鈕到1時，就不能再減了 -->
<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeLandle(index)">移除</button></td>
</tr>
</tbody>
</table>
<!--以錢的方法顯示出來 -->
<!-- 錢的話最好使用計算屬性computed -->
<h2>總價格:{{totalPrice | showPrice }}</h2>
</div>
<h2 v-else>購物車為空</h2>
</div>
<script src="../vue.js"></script>
<script src="./main.js"></script>
<script></script>
</body>
這是css的
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding:8px 16px ;
border: 1px solid #e9e9e9;
text-align: center;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
這是js的
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '《演算法導論》',
data: '2006-9',
price: 85.0,
count: 1
},
{
id: 2,
name: '《UNIX程式設計藝術》',
data: '2006-2',
price: 59.0,
count: 1
},
{
id: 3,
name: '《程式設計珠璣》',
data: '2008-10',
price: 39.0,
count: 1
},
{
id: 4,
name: '《程式碼大全》',
data: '2006-3',
price: 128.0,
count: 1
}
]
},
methods: {
// getFinalPrice(price){
// return '¥'+price.toFixed(2);
// },
increment(index) {
// console.log('increment', index);
this.books[index].count++;
},
decrement(index) {
// console.log('decrement', index);
this.books[index].count--;
// 減到一時，就不能減了
},
removeLandle(index){
this.books.splice(index,1);//這裡等於1的話相當於把自己刪掉
}
},
computed:{
totalPrice(){
// console.log(1);
let totalPrice=0;
for(let i=0;i<this.books.length;i++){
totalPrice=totalPrice+this.books[i].price*this.books[i].count;
}
return totalPrice;
}
},
// 過濾器
filters: {
showPrice(price) {
return '¥' + price.toFixed(2);
}
}
})
來看看瀏覽器中的效果
點選增加或者減少的按鈕會有不同的效果
當移除清空時
