這是效果圖 看起來很簡單是不是 之前一直寫Jquery代碼 總是想着 DOM 操作 思維感覺沒有切換過來 想了很久,最后使用Vue的屬性進行控制,實現了多選計算屬性的功能
直接上源碼!
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>購物車示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th>
<input type="checkbox" @click="allCheck()">
</th>
<th>編號</th>
<th>商品名稱</th>
<th>商品單價</th>
<th>購買數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" :checked="isAllCheck" @click="tab(index)">
</td>
<td> {{ index+1 }} </td>
<td> {{ item.name }} </td>
<td> {{ item.price }} </td>
<td>
<button @click="deleteto(index)">-</button>
{{ item.count }}
<button @click="add(index)"> +</button>
</td>
<td>
<button @click="remove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div> 總價:$ {{ totalPrice }} </div>
</template>
<div v-else>
購物車為空
</div>
</div>
<script src="../vue.js"></script> //這個路徑要修改,就不多說了
<script src="index.js"></script>
</body>
</html>
- index.js
var app = new Vue({
el: "#app",
data: {
list: [{ //模擬ajax獲取的數據
id: 1,
name: "iphone7",
price: 6188,
count: 1,
isCheck: false
},
{
id: 2,
name: "ipad pro",
price: 5888,
count: 1,
isCheck: false
},
{
id: 1,
name: "Mac",
price: 21488,
count: 1,
isCheck: false
}
],
isAllCheck: false
},
computed: {
totalPrice() {
if (!this.isAllCheck) return 0 //全選取消 返回0
//filter 它用於把Array的某些元素過濾掉，然后返回剩下的元素
let check = this.list.filter(item => item.isCheck) //傳入list 在進行判斷list.isCheck true/false
if (check.length == 0) return 0 //全部沒有選中返回0
let total = 0;
for (var i = 0; i < check.length; i++) {
var item = check[i];
total += item.price * item.count; //價格*數量
}
return total;
}
},
methods: {
deleteto(index) {
if (this.list[index].count == 1) {} else {
this.list[index].count--;
}
},
add(index) {
this.list[index].count++;
},
remove(index) {
this.list[index].count = 0
},
tab(index) {
this.list[index].isCheck = this.list[index].isCheck ? false : true //切換是否選中
},
allCheck() {
this.isAllCheck = !this.isAllCheck
if (this.isAllCheck) {
this.list.map(item => {
item.isCheck = true
})
}
}
}
})
- style.css
[v-cloak]{
display: none;
}
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;
}
這樣的功能使用Vue,代碼簡單易懂,相對於原生代碼,無論是可讀性還是代碼量都要簡單,希望大家看到這個案例,勤加學習,不要虛度光陰,尤其是大學生
今晚太晚了,就此結束