vue购物车

最新推荐文章于 2023-12-12 20:05:23 发布

原创最新推荐文章于 2023-12-12 20:05:23 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

5 篇文章

订阅专栏

这是一个使用Vue.js编写的示例，展示了如何在表格中实现全选功能，并实时计算选中商品的总价。通过v-model双向绑定，实现了checkbox状态与数据的同步，同时在计算属性中处理了总价的更新。

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>

<body>
    <div id="contend">
        <table>
            <thead>
                <th><input type="checkbox" v-model="allCheck"></th>
            </thead>
            <tbody>
                <tr v-for="(itme,index) in arr" :key="index">
                    <td><input type="checkbox" v-model="itme.state"></td>
                    <td>{{itme.name}}</td>
                    <td>{{itme.price}}</td>
                </tr>
            </tbody>
        </table>
        总价:{{allp}}
    </div>
</body>
<script>
    new Vue({
        el: '#contend',
        data: {
            arr: [
                {
                    name: '苹果',
                    price: '20',
                    state: false
                },
                {
                    name: '橘子',
                    price: '30',
                    state: false
                },
                {
                    name: '桃子',
                    price: '25',
                    state: false
                }
            ],
            allp: ''
        },
        computed: {
            allCheck: {
                get() {
                    let picke = 0
                    this.arr.forEach(item => {
                        if (item.state) {
                            picke += Number(item.price)
                        }
                        this.allp = picke
                    })
                    return this.arr.every((item) => item.state)
                },
                set(a) {
                    return this.arr.forEach(item => (item.state = a));
                }
            },
        }
    })
</script>

</html>