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

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

1.实现效果

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;
}

你可能感兴趣的:(JavaScript)