基于Vue2.0商品列表全选。单选后全选，勾选后商品价格变动!

最新推荐文章于 2024-08-09 08:00:00 发布

一只很想飞的猪

最新推荐文章于 2024-08-09 08:00:00 发布

阅读量1.3k

点赞数 1

分类专栏： vue-js 文章标签： vue-js

本文链接：https://blog.csdn.net/weixin_40043172/article/details/78893686

版权

vue-js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

话不多说上效果图
这里写图片描述
贴代码：
html片段：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>

    <body>
        <div id="app" v-cloak>
            <template v-if="list.length">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" @change="change()" v-model="allCheck"/>
                            </th>
                            <th>编号</th>
                            <th>商品名称</th>
                            <th>价格</th>
                            <th>购买数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in list">
                            <td><input type="checkbox"  v-model="item.satus" @change="itemChange()"/></td>
                            <td>{{index+1}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>
                                <button
                                @click="Handle(index)"
                                :disabled="item.coutn===1">-</button>
                                {{item.count}}
                                <button
                                @click="Add(index)">+</button>
                            </td>
                            <td><button @click="remove(index)">移除</button></td>
                        </tr>
                    </tbody>
                </table>
                <div>总价￥{{pricetotale}}</div>
            </template>
            <div v-else>购物车为空</div>
        </div>
    </body>
    <script src="https://unpkg.com/vue"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

js片段：

var app = new Vue({
    el: '#app',
    data: {
        list: [{
                id: 1,
                name: "iPhone7",
                price: 6188,
                count: 1,
                satus: false
            },
            {
                id: 2,
                name: "sunXing",
                price: 2188,
                count: 1,
                satus: false
            },
            {
                id: 3,
                name: "iPad Pro",
                price: 5188,
                count: 1,
                satus: false
            },
            {
                id: 4,
                name: "Macbook",
                price: 8188,
                count: 1,
                satus: false
            },
            {
                id: 5,
                name: "huawei",
                price: 1188,
                count: 1,
                satus: false
            },
        ],
        allCheck: false,
    },
    methods: {
        //减商品数量
        Handle: function(index) {
            if(this.list[index].count === 1) return
            this.list[index].count--;
        },
        //增加商品数量
        Add: function(index) {
            this.list[index].count++;
        },
        remove: function(index) {
            this.list.splice(index, 1)
        },
        //全选
        change: function() {
            var vm=this;
            vm.list.forEach(function(v, o) {
                v.satus = vm.allCheck
            })
        },
        //单选勾住后全选
        itemChange:function(){
            var vm=this;
            var select=vm.list.filter(function(v,o){
                return v.satus == true
            })
            select.length==vm.list.length ? vm.allCheck=true:vm.allCheck=false
        }
    },
    computed: {
        //计算总价
        pricetotale: function() {
            var tatol = 0;
            for(var i = 0; i < this.list.length; i++) {
                var item = this.list[i];
                if(item.satus==true){
                    tatol += item.price * item.count
                }
            }
            //千位分隔符正则
            return tatol.toString().replace(/\B(?=(\d{3})+$)/g, ',')
        }
    }
})