VUE-書籍購物車案例

新手小白請求出戰！發表於2020-11-13
Vue

要求：可以實現購買數量增加和減少的操作，還有移除，以及在增加和刪除的時候顯示價格，如果當全部移除時，把購物車為空顯示出來

話不多說，上程式碼

這是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);
        }
    }
})

 

 來看看瀏覽器中的效果

點選增加或者減少的按鈕會有不同的效果

當移除清空時

 

 

 

相關文章