vue.基础购物车功能详细制作

<code class="language-plaintext hljs"><div id="app" v-cloak>
        <table width="500" border="2">
            <tr id="head" align="center">
                <th>{<!-- -->{name}}</th>
                <th>{<!-- -->{price}}</th>
                <th>{<!-- -->{number}}</th>
                <th>{<!-- -->{Operation}}</th>
            </tr>
            <tr align="center" v-for="(item,index) in list" :style="item.number>0?'background-color:red':''">
                <td>{<!-- -->{item.name}}</td>
                <td>￥:{<!-- -->{item.price}}</td>
                <td>
                    <button @click="decrease(index)" style="display:none;" v-show="item.number >= 1">-</button>
                    <span>{<!-- -->{item.number}}</span>
                    <button @click="increase(index)">+</button>
                </td>
                <td>
                    <button @click="editor(index)">编辑</button>
                    <button @click="deletes(index)">删除</button>
                </td>
            </tr>
            <tr align="center">
                <td></td>
                <td>总价格：{<!-- -->{totalPrice}}￥</td>
                <td>总数量：{<!-- -->{totalNum}}</td>
                <td></td>
            </tr>
        </table>
        <div id="addBox">
            <button @click="add">{<!-- -->{message}}</button>
            <form v-show="isShow" @submit.prevent="insert">
                商品名称：<input v-bind:type="type" v-model.name="names" placeholder="商品名称">
                价格 : <input v-bind:type="typeNumber" v-model.number="num">
                <button>添加</button>
            </form>
            <form v-show="inShow" @submit.prevent="editors(index)">
                商品名称：<input v-bind:type="type" v-model="input_names" placeholder="商品名称">
                价格 : <input v-bind:type="typeNumber" v-model.number="input_num">
                <button>确认编辑</button>
            </form>
        </div>
    </div></code>

<code class="language-plaintext hljs"><script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    name: '名称'，
                    names: '',
                    price: '价格',
                    prices: '',
                    number: '数量',
                    Operation: '操作',
                    type: 'text',
                    typeNumber: 'number',
                    isShow: false,
                    inShow: false,
                    message: '添加商品',
                    num: 0,
                    editorname: '编辑',
                    // 基础数据
                    list: [{
                        name: '三相之力',
                        price: 3000,
                        number: 1,
                    },
                    {
                        name: '无尽之刃',
                        price: 3400,
                        number: 1,
                    }],
                    index:null
                }
            },
            computed:{
                // 总价格
                totalPrice() {
                    let num = 0;
                    this.list.forEach(element => {
                        num += (element.price * element.number)
                    });
                    return num
                },
                // 总数量
                totalNum() {
                    let num = 0;
                    this.list.forEach(element => {
                        num += element.number
                    });
                    return num
                },
            },
            methods: {
                // 添加商品
                add() {
                    this.isShow = !this.isShow;//布尔值运算显示隐藏
                    if (this.isShow) {
                        this.message = '关闭添加商品';
                    } else {
                        this.message = '添加商品';
                    };
                },
                insert() {
                    if (this.names == '') {
                        alert('请填写商品')
                    } else {
                        this.list.push({
                            name: this.names,
                            price: this.num,
                            number: 1
                        })
                        this.isShow = !this.isShow;
                        this.names=''
                        this.num=''
                    };
                },
                // 减少数量
                decrease(i) {
                    this.list[i].number--
                    if (this.list[i].number <= 0 && confirm("是否删除")) {
                        this.list.splice(i, 1)
                    };
                },
                // 添加数量
                increase(i) {
                    this.list[i].number++
                },
                // 删除商品
                deletes(i) {
                    this.list.splice(i, 1)
                },
                // 编辑商品
                editor(i) {
                    this.inShow = !this.inShow;
                    if (this.isShow) {
                        this.editorname = '编辑';
                    };
                    this.input_names = this.list[i].name;
                    this.input_num = this.list[i].price;
                    this.index=i;
                },
                editors() {
                    this.list[this.index].name=this.input_names
                    this.list[this.index].price=this.input_num;
                    this.inShow = !this.inShow;
                },
            },
        }).mount('#app')
    </script></code>