Vue購物車（全選和全不選）

阿新 • • 發佈：2021-02-19

效果如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    < 
style>
        table {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
        }
        
        table th,
        td {
            border: 1px solid #000;
        }
    </style>
</head 
>

<body>
    <div id='app'>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="isAll" @change="checkAll">全選/全不選</th>
                    <th>商品名稱</th> 

                    <th>商品價格</th>
                    <th>商品數量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in lists" ::key="v.id">
                    <td><input type="checkbox" v-model="checkGroup" :value="v" @change="checkOne"></td>
                    <td>{{v.name}}</td>
                    <td>{{v.price}}</td>
                    <td>
                        <button @click="v.num--" :disabled="v.num===1">-</button> {{v.num}}
                        <button @click="v.num++" :disabled="v.num===v.limit">+</button>
                    </td>
                    <td><button @click="del(i,v.id)">刪除</button></td>
                </tr>
            </tbody>
        </table>
        {{checkGroup}}
        <div>總額：{{sum()}}</div>
    </div>
    <script src='/vue.js '></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isAll: false,
                checkGroup: [],
                lists: [{
                    id: 1,
                    name: '商品1',
                    price: 10,
                    num: 1,
                    limit: 5
                }, {
                    id: 2,
                    name: '商品2',
                    price: 20,
                    limit: 5,
                    num: 1,
                }, {
                    id: 3,
                    name: '商品3',
                    price: 30,
                    limit: 5,
                    num: 1,
                }, {
                    id: 4,
                    name: '商品4',
                    price: 40,
                    limit: 5,
                    num: 1,
                }],
            },
            methods: {
                sum() {
                    // let sum = 0;
                    // this.checkGroup.forEach((value) => {
                    //     sum += value.price * value.num;
                    // });
                    // return sum;


                    return this.checkGroup.reduce((previousValue, value) => {
                        console.log(this.checkGroup);
                        console.log(value);
                        return previousValue += value.price * value.num;
                    }, 0);
                },
                del(i, id) {
                    // console.log(i);
                    //刪除原陣列
                    this.lists.splice(i, 1);
                    //得刪除checkGroup陣列中對應的元素
                    this.checkGroup = this.checkGroup.filter((value) => {
                        return value.id !== id;
                    });


                    //這個checkOne在點刪除事件的時候也要判定一次
                    this.checkOne();
                },
                checkAll() {
                    if (this.isAll) {
                        this.checkGroup = this.lists;
                    } else {
                        this.checkGroup = [];
                    }
                },
                checkOne() {
                    if (this.checkGroup.length === this.lists.length && this.lists.length !== 0) {
                        this.isAll = true;
                    } else {
                        this.isAll = false;
                    }
                },
            },
        });
    </script>
</body>

</html>

Vue購物車（全選和全不選）

技術標籤：VueWeb前端分享一下我的心得vue.jsjs前端效果如下： <!DOCTYPE html>

使用jQuery完成複選框的全選和全不選

要完成這個效果，必然要了解jQuery中對屬性操作的方法： attr()：設定或返回被選元素的屬性值。

js實現全選和全不選功能

本文例項為大家分享了js實現全選和全不選的具體程式碼，供大家參考，具體內容如下

js實現全選和全不選

本文例項為大家分享了js實現全選和全不選的具體程式碼，供大家參考，具體內容如下

使用React的Hooks+ts實現全選和全不選？

import React, { useState, useEffect } from \'react\'; import { Input, List } from \'antd\'; import Add from \'./Add\';

checkbox實現全選和全不選

技術標籤：js 表格全選功能分析： 1.三個按鈕：全選全不選反選 2.滑鼠移入變色，移出復原

JavaScript實現全選和全不選操作

本文例項為大家分享了實現全選和全不選操作的具體程式碼，供大家參考，具體內容如下

html多選框，全選和全不選功能

<!DOCTYPE html> <html> <head> <title></title> </head> <style type=\"text/css\">

TERSUS筆記員工資訊512-Tersus勾選框全選和全不選的三種設定方法(轉載)

轉載地址：https://www.yuque.com/docs/share/652c0886-0f26-4246-9970-f0b926fb7804?# Tersus勾選框全選和全不選的三種設定方法

el-table在ajax分頁時支援單頁全選和全選所有

　　需求：el-table中，ajax分頁的情況下，要支援單頁全選和所有頁全選功能，效果如下圖所示：

2019年Java併發精選面試題，哪些你還不會？（含答案和思維導圖）

Java 併發程式設計 1、併發程式設計三要素？ 2、實現可見性的方法有哪些？ 3、多執行緒的價值？

vue 封裝元件（以button和select為例）

Button 目錄檔案首先建立button資料夾，新建index.vue檔案 index.vue <template> <div :class=\"type == \'Default\'?\'btn default\':type == \'primary\'?\'btn primary\':type == \'danger\'?\'btn d