vue写购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<style>
    .box {
        width: 22em;
        height: 2em;
    }
    .list>li {
        height: 1.6em;
        background-color: #efefef;
        display: grid;
        grid-template-columns: repeat(5, 3em);
        gap: 1em;
        place-items: center right;
        border-bottom: 1px solid #ccc;
    }
    .list>li:first-of-type {
        background-color: lightseagreen;
        color: white;
    }
    .list>li:hover:not(:first-of-type) {
        cursor: pointer;
        background-color: lightcyan;
    }
    .list>li input[type='number'] {
        width: 3em;
        border: none;
        outline: none;
        text-align: center;
        font-size: 1em;
        background-color: transparent;
    }
    .list>li:last-of-type span.total-num,
    .list>li:last-of-type span.total-amount {
        grid-column: span 2;
        place-self: center right;
        color: lightseagreen;
    }
    .account {
        float: right;
        background-color: lightseagreen;
        color: white;
        border: none;
        outline: none;
        width: 4.5em;
        height: 1.8em;
    }
    .account:hover {
        background-color: coral;
        cursor: pointer;
    }
</style>
<body>
    <div class="app">
        <div class="box">
            <div class="selectAll">
                <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
                <input type="checkbox" class="check-all" name="check-all" @change="checkAll($event)" checked />
                <label for="check-all">全选</label>
            </div>
            <ul class="list">
                <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
                <li>
                    <input type="checkbox" @change="checkItems($event)" checked />
                    <span class="content">手机</span>
                    <input type="number" min="1" v-model="number1" />
                    <span class="price">{{price1}}</span>
                    <span class="amount1">{{payAmount1}}</span>
                </li>
                <li>
                    <input type="checkbox" @change="checkItems($event)" checked />
                    <span class="content">电脑</span>
                    <input type="number" min="1" v-model="number2" />
                    <span class="price">{{price2}}</span>
                    <span class="amount">{{payAmount2}}</span>
                </li>
                <li>
                    <input type="checkbox" @change="checkItems($event)" checked />
                    <span class="content">相机</span>
                    <input type="number" min="1" v-model="number3" />
                    <span class="price">{{price3}}</span>
                    <span class="amount">{{payAmount3}}</span>
                </li>
                <li>
                    <span>总计:</span>
                    <span class="total-num">{{totalNum}}</span>
                    <span class="total-amount">{{totalAmount}}<span>
                </li>
            </ul>
            <button class="account">结算</button>
        </div>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                number1: 0,
                price1: 100,
                number2: 0,
                price2: 200,
                number3: 0,
                price3: 300,
            }
        },
        //计算器属性
        computed: {
            payAmount1() {
                return this.number1 * this.price1;
            },
            payAmount2() {
                return this.number2 * this.price2;
            },
            payAmount3() {
                return this.number3 * this.price3;
            },
            totalNum() {
                return this.number1 + this.number2 + this.number3;
                // return jieguo;
            },
            totalAmount() {
                return this.payAmount1 + this.payAmount2 + this.payAmount3
            }
        },
        //侦听器属性
        watch: {
        },
        methods: {
            //全选
            checkAll(ev) {
                let checkArr = document.querySelectorAll(
                    '.list li input[type="checkbox"]'
                );
                let status = ev.target.checked;
                checkArr.forEach((item) => (item.checked = status))
                if (status) {
                    this.number1 = 1;
                    this.number2 = 1;
                    this.number3 = 1;
                }else{
                    this.number1 = 0;
                    this.number2 = 0;
                    this.number3 = 0;
                }
            },
            //单选
            checkItems(ev) {
                let checkArr = document.querySelectorAll(
                    '.list li input[type="checkbox"]'
                );
                let check = document.querySelector(
                    '.selectAll input'
                );
                console.log('下面的三个按钮的数组', checkArr);
                console.log('全选那一个按钮', check);
                check.checked = [...checkArr].every((item) => (item.checked));
                let numbers = document.querySelectorAll(
                    '.list li input[type="number"]'
                );
            },
        }
    }).mount('.app');
</script>
</html>
Correcting teacher：
PHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
图链接列表

2022-03-18 00:37:13