Vue購物車實例
阿新 • • 發佈：2018-03-03
eth name als blog 易懂 代碼 多說 compute app
這是效果圖 看起來很簡單是不是 之前一直寫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 - 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,代碼簡單易懂,相對於原生代碼,無論是可讀性還是代碼量都要簡單,希望大家看到這個案例,勤加學習,不要虛度光陰,尤其是大學生
今晚太晚了,就此結束
Vue購物車實例