vue购物车

最新推荐文章于 2025-04-24 17:20:34 发布

恩神

最新推荐文章于 2025-04-24 17:20:34 发布

阅读量213

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/essnbb/article/details/126511767

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

<!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>