1. 程式人生 > >Vue購物車實例

Vue購物車實例

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
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,代碼簡單易懂,相對於原生代碼,無論是可讀性還是代碼量都要簡單,希望大家看到這個案例,勤加學習,不要虛度光陰,尤其是大學生

今晚太晚了,就此結束

Vue購物車實例