使用Vue制作简易购物车

使用vue基础语法制作一个简单的购物车：

首先搭建HTml样式：

v-for：类似于js中的for循环，需要使用item in items 特殊语法

<div id="app">

        <table border="1">
            <thead>
                <tr style="text-align: center;">
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>

                </tr>
            </thead>
            <tbody>
                <!-- key:高效更新，唯一 ，index，id等等。-->
                <!--  -->
                <tr v-for="(item,index) in list " :key="item.id"
                    :style="{backgroundColor:item.count >0 ?'#ffd96c':'' }">
                    <td>{{item.name}}</td>
                    <td>￥{{item.price}}</td>
                    <td><input type="button" value="-" @click="minus(index)"
                            v-show="item.count!=0"><span>{{item.count}}</span><input type="button" value="+"
                            @click="add(index)"></td>
                    <td><input type="button" value="编辑" @click="kai(index)"><input type="button" value="删除"
                            @click="del(index)"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>总价:<span>{{allPrice()}}</span></td>
                    <td>总数量：<span>{{allNum()}}</span></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <button @click="ope">添加商品</button>
        <div v-show="adds">
            <button @click="jia">添加</button><button @click="clo">取消</button><input type="text" placeholder="名称"
                v-model="i_name"><input type="text" placeholder="价格" v-model="i_price"
                onkeyup="this.value=this.value.replace(/\D/g,'')"
                onafterpaste="this.value=this.value.replace(/\D/g,'')">
        </div>
        <div v-show="change">
            <button @click="upd(index)">保存</button><button @click="guan">取消</button><input type="text" placeholder="名称"
                v-model="names"><input type="text" placeholder="价格" v-model="prices"
                onkeyup="this.value=this.value.replace(/\D/g,'')"
                onafterpaste="this.value=this.value.replace(/\D/g,'')">
        </div>

引入vue.js文件，使用vue ：

首先创建一个假数据：

   return {

                    list: [{
                        id:1,
                        name: "商品1",
                        price: 10,
                        count: 0
                    },
                    {
                        id:2,
                        name: "商品2",
                        price: 20,
                        count: 0
                    }],
                    names: "",
                    prices: "",
                    i_name: "",
                    i_price: "",
                    adds: false,
                    change: false,
        
                };

 接下来写入加，减，增，删：

 methods: {

                //   加
                add(index) {
                    this.list[index].count++;

                },
                // 减
                minus(index) {
                    this.list[index].count--;
                },
                // 删
                del(index) {
                    this.list.splice(index, 1);
                },
                // 增
                ope() {
                    this.adds = true;

                },
                jia() {
                    if (this.i_name != "" && this.i_price != "") {
                        this.list.push({
                            name: this.i_name,
                            price: this.i_price,
                            count: 0,
                        }),
                            this.adds = true;
                        this.i_name = '';
                        this.i_price = '';
                    }

                },

                clo() {
                    this.adds = false;
                },
                // 改
                upd(index) {
                    if (this.names != "" && this.prices != "") {
                        this.list[index].name = this.names;
                        this.list[index].price = this.prices;
                        this.prices = "",
                            this.names = "",
                            this.change = false;
                    }

                },
                kai(index) {
                    this.change = true;
                    this.index = index;
                    this.names = this.list[index].name;
                    this.prices = this.list[index].price;
                },
                guan() {
                    this.change = false
                },

                allNum(){
                    let num=0;
                    this.list.forEach(val=>{
                        num+= val.count;
                    })
                    return num;

                },
                allPrice(){
                    let num=0;
                    this.list.forEach(val=>{
                        num+= val.count*val.price;
                    })
                    return num;

                },
                  
                       
            }

附上完整 ：

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {

                    list: [{
                        id:1,
                        name: "商品1",
                        price: 10,
                        count: 0
                    },
                    {
                        id:2,
                        name: "商品2",
                        price: 20,
                        count: 0
                    }],
                    names: "",
                    prices: "",
                    i_name: "",
                    i_price: "",
                    adds: false,
                    change: false,
        
                };
            },
           

            methods: {

                //   加
                add(index) {
                    this.list[index].count++;

                },
                // 减
                minus(index) {
                    this.list[index].count--;
                },
                // 删
                del(index) {
                    this.list.splice(index, 1);
                },
                // 增
                ope() {
                    this.adds = true;

                },
                jia() {
                    if (this.i_name != "" && this.i_price != "") {
                        this.list.push({
                            name: this.i_name,
                            price: this.i_price,
                            count: 0,
                        }),
                            this.adds = true;
                        this.i_name = '';
                        this.i_price = '';
                    }

                },

                clo() {
                    this.adds = false;
                },
                // 改
                upd(index) {
                    if (this.names != "" && this.prices != "") {
                        this.list[index].name = this.names;
                        this.list[index].price = this.prices;
                        this.prices = "",
                            this.names = "",
                            this.change = false;
                    }

                },
                kai(index) {
                    this.change = true;
                    this.index = index;
                    this.names = this.list[index].name;
                    this.prices = this.list[index].price;
                },
                guan() {
                    this.change = false
                },

                allNum(){
                    let num=0;
                    this.list.forEach(val=>{
                        num+= val.count;
                    })
                    return num;

                },
                allPrice(){
                    let num=0;
                    this.list.forEach(val=>{
                        num+= val.count*val.price;
                    })
                    return num;

                },
                  
                       
            }
        }).mount("#app")
    </script>

最终呈现效果：