初学vue，使用vue完成基础购物车

2023-12-22 10:33:22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础购物车</title>
    <style>
        table{
			width: 300px;
			border-spacing: 0;
			border-top: 1px solid gray;
			border-left: 1px solid gray;
		}
		th{
			font-weight: bold;
		}
		td,th{
			border-right: 1px solid gray;
			border-bottom: 1px solid gray;
			text-align: center;
		}
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in count" :style="{backgroundColor: item.num != 0? color:''}" >
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td><button @click="minus(index)" v-if="item.num>0">-</button>{{item.num}}<button @click="add(index)">+</button></td>
                    <td><button @click="edit(index)">编辑</button><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td>总价:{{Allprice}}</td>
                    <td>总数量:{{Allnum}}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
        <div><button @click="addShop">添加商品</button></div>
		<div v-show="status == 1">
            <button @click="save">保存</button>
		    <button @click="cancel">取消</button>
		    <input type="text" v-model="Shopname" placeholder="请输入商品名称">
		    <input type="number" v-model="Shopnum" placeholder="请输入商品数量">
            <input type="number" v-model="Shopprice" placeholder="请输入商品价格">
		</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <script>
        let { createApp, reactive ,ref } = Vue;
        createApp({
            setup(){
                const status = ref(0)
                const jian = ref(0)
                const Shopname = ref()
                const Shopnum = ref()
                const Shopprice = ref()
                const Addnum = ref()
                let hui = 0  
                let indexs              
                const obj = reactive(
                    {
                        name:'',
                        num:0,
                        price:''
                    }
                )
                const count = reactive(
                [{
                    name:'商品一',
                    num:0,
                    price:100
                },{
                    name:'商品二',
                    num:0,
                    price:100
                },{
                    name:'商品三',
                    num:0,
                    price:100
                }
            ]);
            // 添加商品
            let addShop = ()=>{
                hui = 1
                if(status.value == 1){
                    status.value = 0
                }else{
                    status.value = 1
                }
                Shopname.value =''
                Shopprice.value=''
                Shopnum.value=''
            }
            // 编辑
            let edit = (index)=>{
                hui = 2
                indexs = index
                if(status.value == 1){
                    status.value = 0
                }else{
                    status.value = 1
                }
                Shopname.value = count[index].name
                Shopprice.value = count[index].price
                Shopnum.value = count[index].num
            }
            // 编辑保存
            let save = ()=>{
                if(status.value == 1){
                    status.value = 0
                }else{
                    status.value = 1
                }
                let obj = {
                    name:Shopname.value,
                    num:Shopnum.value,
                    price:Shopprice.value
                }
                if(hui == 1){
                count.push(obj)
                }else if(hui == 2){
                count.splice(indexs,1,obj)
                }
                Aprice()
            }
            // 取消
            let cancel = ()=>{
                if(status.value == 1){
                    status.value = 0
                }else{
                    status.value = 1
                }
            }
            // 总价
            let Allprice = ref(0)
            let Allnum = ref(0)
            function Aprice (){
                Allprice.value = 0
                Allnum.value = 0
                for (let i = 0; i < count.length; i++) {
                Allprice.value += count[i].price*count[i].num;
			}
            for (let i = 0; i < count.length; i++) {
                Allnum.value += count[i].num
			}
            console.log(Allprice);
            }
            // 加减按钮
            let add = (index)=>{
                count[index].num++;
                Aprice()
            }
            let minus = (index)=>{
                count[index].num--;
                Aprice()
            }
            // 删除
            let del = (index)=>{
                count.splice(index,1)
            }
                console.log(count);
                return{
                    count,
                    addShop,
                    edit,
                    Shopname,
                    Shopnum,
                    Shopprice,
                    save,
                    cancel,
                    add,
                    minus,
                    del,
                    Aprice,
                    jian,
                    status,
                    Allprice,
                    Allnum,
                    color:'red',
                    obj
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

直接上代码，简单好懂?

文章来源:https://blog.csdn.net/2301_79265530/article/details/135146288
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。