vue實現書籍購物車功能

本文例項為大家分享了實現書籍購物車功能的具體程式碼，供大家參考，具體內容如下

效果圖

點選增加、減少購買數量和移除總價格會變化

vue實現書籍購物車功能

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>書籍購物車</title>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,td{
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th{
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <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>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | showPrice}}</td>
                        <td>
                            <!-- disabled 為true時按鈕禁用 -->
                            <button @click="reduce(index)" v-bind:disabled="item.count <= 1">-</button>
                            {{item.count}}
                            <button @click="increase(index)">+</button>
                        </td>
                        <td><button @click="remove(index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
            <h2>總價格：{{totalPrice | showPrice}}</h2>
        </div>
        <h2 v-else>購物車為空</h2>
    </div>
    <script src="https://cdn.delivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",data:{
                books:[
                    {
                        name: '《演算法導論》',date: '2021-8-1',price: 85.00,count: 1
                    },{
                        name: '《UNIX藝術》',date: '2021-8-2',price: 69.00,{
                        name: '《程式設計珠璣》',date: '2021-8-3',price: 35.00,{
                        name: '《DOM程式設計藝術》',date: '2021-8-4',price: 75.00,count: 1
    
                 },{
                        name: '《nodejs深入淺出》',date: '2021-8-5',price: 105.00,],},www.cppcns.com      methods:{
                reduce(index){
                    this.books[index].count--;
                },increase(index){
                    this.books[index].count++;
                },remove(index){
                    this.books.splice(index,1);

                },computed:{
                // 寫在計算屬性裡的方法可以直接當屬性使用
                totalPrice(){
     //let totalPrice = 0;

                    // 1. 普通的for迴圈
                    // for (let i = 0; i < this.books.length; i++) {
                    //     totalPrice += this.books[i].count * this.books[i].price;
                    // }

                    // 2. 步驟稍簡單的普通for迴圈
 
                    // for (let i in this.books) {
                    //     totalPrice += this.books[i].count * this.books[i].price;
                    // }

                    // 3. for(let item of this.books)
                    //for(let item of this.books){
                        //totalPrice += item.count * item.price;
                    //}
                  zGgDoBBbtK 
  //return totalPrice;

     // 4. 高階函式寫法 reduce
     // 直接返回結果 不需要定義變數，也不需要遍歷
     return this.books.reduce(function(pre,book){
                        return pre + book.price * book.count;
                    },0);
            },// 過濾器
            filters:{
                showPrice(price){
                    return "￥" + price.toFixed(2);
                }
            }
        })
    </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

vue實現書籍購物車功能

效果圖

程式碼

vue實現書籍購物車功能

Vue實現簡單購物車功能

Vue實現小購物車功能

vue.js實現簡單購物車功能

vue中書籍購物車的實現

vue實現掃碼功能

Vue實現瀏覽器列印功能的程式碼

vue實現評價星星功能

Vue - 實現穿梭框功能

vue:實現圖書購物車

vue實現虛擬列表功能的程式碼

vue 實現錨點功能操作

Java策略模式實現簡單購物車功能

vue實現lodop列印功能

vue實現lodop列印功能的示例

vue實現檔案下載功能

vue實現表格合併功能

微信小程式實現簡單購物車功能

Vue實現簡易購物車頁面

vue實現簡易計算器功能

vue實現書籍購物車功能

效果圖

程式碼

相關推薦