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>
vue写购物车

vue写购物车

更多相关文章

随机推荐
