Vue.js 实现购物车和v-for 实现checkbox复选框全选

Vue.js 实现购物车和v-for 实现checkbox复选框全选1.实现效果2.代码实现2.1.html<html><head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

YueLinbo

8545人浏览 · 2018-04-24 15:51:14

YueLinbo · 2018-04-24 15:51:14 发布

Vue.js 实现购物车和v-for 实现checkbox复选框全选

1.实现效果

这里写图片描述

2.代码实现

2.1.html

<html>

<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>购物车实例</title>
</head>



<body>

<div id="app" v-cloak>

<template v-if="list.length">
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" @click="checkAll" v-model="checkall"></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="checked" :value="item.id"></td>
                <td>{{ item.name}}</td>
                <td>{{  item.price}}</td>

                <td>
                    <button @click="handleReduce(index)" :disabled="item.count ===1">-</button>
                    {{item.count}}
                    <button @click="handleAdd(index)">+</button>
                </td>
                <td><button @click="handleRemove(index)">移除</button></td>

            </tr>
        </tbody>
    </table>

    <div>总价：{{ totalPrice }}</div>
    <div>{{checked}}</div>

</template>

<div v-else>购物车为空</div>

</div>



</body>

<script type="text/javascript">

</script>



<script src="index.js"></script>
</html>

2.2 js部分

var app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: 'iPhone 7',
                price: 16188,
                count: 1
            },
            {
                id: 2,
                name: 'iPhone 8',
                price: 16188,
                count: 1
            },
            {
                id: 3,
                name: 'iPhone X',
                price: 16188,
                count: 1
            }
        ],
         checkall: false,
         checked: []

    },
    computed: {
        totalPrice: function(){
            var total = 0;
            for(var i=0;i<this.list.length;i++){
                var item = this.list[i];
                total += item.price * item.count;
            }

            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
    },
    methods: {
        handleReduce: function(index){
            if(this.list[index].count === 1) return;
            this.list[index].count--;
        },
        handleAdd: function(index){
            this.list[index].count++;
        },
        handleRemove: function(index){
            this.list.splice(index,1);
        },
        checkAll: function () {
         var _this = this
        if (this.checkall) {
        // 实现反选
            this.checked = []
        } else {
        // 实现全选
            this.checked = []
            this.list.forEach(function (item) {
                _this.checked.push(item.id)
            })
        }
        if (this.checked.length === this.list.length) {
            this.checkall = true
        // console.log(this.checkall)
        // console.log(this.checked)
        }
    }


    }
})

2.3 CSS部分

[v-cloak] {
    display: none;
}

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^