VUE3（八）综合案例

// index.js
Vue.createApp({
    template: "#my-app",
    data(){
        return {
            books: [
                {
                    id: 1,
                    name: '《算法导论》',
                    date: '2006-9',
                    price: 85.00,
                    count: 1
                },
                {
                    id: 2,
                    name: '《UNIX编程艺术》',
                    date: '2006-2',
                    price: 59.00,
                    count: 1
                },
                {
                    id: 3,
                    name: '《编程珠玑》',
                    date: '2008-10',
                    price: 39.00,
                    count: 1
                },
                {
                    id: 4,
                    name: '《数据结构》',
                    date: '2010-2',
                    price: 58.00,
                    count: 1
                },
            ]
        }
    },
    methods:{
        increment(index){
            // 通过索引值获取到对象
            console.log(index);
            this.books[index].count++;
        },
        decrement(index){
            this.books[index].count--;
        },
        removeBook(index){
            this.books.splice(index,1);
        },
        formatPrice(price){
            return '￥' + price;
        }
    },
    computed:{
        totalPrice(){
            let finalPrice=0;
            for (let book of this.books){
                finalPrice+=book.price * book.count;
            }
            return finalPrice;
        },
        // vue3不支持过滤器，推荐两种做法：使用计算属性/使用全局的方法
        filterBooks(){
            return this.books.map(item => {
                const newItem=Object.assign({},item);
                newItem.price = '￥' + item.price;
                return newItem;
            });
        }
    }
}).mount("#app");

<!-- index.html -->
<!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>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <template v-if="books.length >0">
            <table>
                <thead>
                    <th>序号</th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(book,index) in books">
                        <td>{{index + 1}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.date}}</td>
                        <td>{{formatPrice(book.price)}}</td>
                        <td>
                            <button :disabled="book.count <= 1" @click="decrement(index)">-1</button>
                            <span class="counter">{{book.count}}</span>
                            <button @click="increment(index)">+1</button>
                        </td>
                        <td>
                            <button @click="removeBook(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价格：{{formatPrice(totalPrice)}}</h2>
        </template>
        <template v-else>
            <h2>购物车为空~</h2>
        </template>
    </template>
    <script src="../js/vue.js"></script>
    <script src="./index.js"></script>
</body>
</html>

/* style.css */
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: #f7f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}

.counter{
    margin: 0px 5px;
}