VUE 学习

最新推荐文章于 2024-06-05 16:31:26 发布

WhiteMask362

最新推荐文章于 2024-06-05 16:31:26 发布

阅读量131

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_62630571/article/details/129015261

版权

1.购物车练习，可以计算总价，移除商品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../homework2_8/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        div{
            width: 500px;
            height: 300px;
            margin: auto;
            border: 1px solid blue;
        }
        td{
            width: 100px;
        }
        div * {
            text-align: center;
        }
        a{
            width: 20px;
            height: 20px;
            border: 1px solid black;
            display: inline-block;
            background-color: rgb(144, 142, 146);
        }

        
    </style>
</head>
<body>
    <div id="app">
        <h1>购物车</h1>
        <table cellspacing="0" border="1px">
            <tr>
                <td></td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item , index) in products" >
                <td> {{index + 1}} </td>
                <td> {{products[index].name}} </td>
                <td> {{products[index].price}} </td>
                <td>
                    <a @click="sub(index)" >-</a> 
                    <span>
                        {{products[index].num}} 
                    </span>
                    <a @click="add(index)" >+</a> 
                </td>

                <td>
                    <button @click="remove(index)" >移除</button>
                </td>
            </tr>

            <tr>
                <td colspan="2">总价格：</td>
                <td colspan="3">￥ {{totalPrice}}</td>
            </tr>
            
        </table>

       
    </div>
    <script>
        var vm = new Vue({
            el : "#app" ,
            data :{
                products : [ 
                    {name : "iPone14 pro" , price : 5000 , num : 0 }  ,
                    {name : "iPone13 pro" , price : 4000 , num : 0 }  ,
                    {name : "iPone12 pro" , price : 3000 , num : 0 }  ,
                    {name : "iPone11 pro" , price : 2000 , num : 0 }  ,
                ] , 
                // 总价格
                totalPrice : 0 
            } ,
            methods : {
                add : function(index){
                    console.log("获取到的下标：" + index);
                    this.products[index].num ++ ;

                    this.getTotalPrice();
                } ,
                sub : function(index){
                    if(this.products[index].num > 0){
                        this.products[index].num --;
                        this.getTotalPrice();
                    }
                } ,
                remove : function(index){
                    this.products.splice(index , 1);
                    this.getTotalPrice();
                },

                getTotalPrice : function(){
                    this.totalPrice = 0;
                    for(var i = 0 ; i < this.products.length ; i++){
                        this.totalPrice += this.products[i].price * this.products[i].num ;
                    }
                    console.log("总价格： " + this.totalPrice);
                }
            }
        });
    </script>
</body>
</html>

2.购物车全部移除后，显示没有商品喽~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../homework2_8/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        div{
            width: 500px;
            height: 300px;
            margin: auto;
            border: 1px solid blue;
        }
        td{
            width: 100px;
        }
        div * {
            text-align: center;
        }
        a{
            width: 20px;
            height: 20px;
            border: 1px solid black;
            display: inline-block;
            background-color: rgb(144, 142, 146);
        }

        
    </style>
</head>
<body>
    <div id="app">
        <h1>购物车</h1>
        <table cellspacing="0" border="1px">
            <tr>
                <td></td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item , index) in products" >
                <td> {{index + 1}} </td>
                <td> {{products[index].name}} </td>
                <td> {{products[index].price}} </td>
                <td>
                    <a @click="sub(index)" >-</a> 
                    <span>
                        {{products[index].num}} 
                    </span>
                    <a @click="add(index)" >+</a> 
                </td>

                <td>
                    <button @click="remove(index)" >移除</button>
                </td>
            </tr>

            <tr v-show="isShow" >
                <td colspan="5">没有数据喽~</td>
            </tr>

        </table>

       
    </div>
    <script>
        var vm = new Vue({
            el : "#app" ,
            data :{
                products : [ 
                    {name : "iPone14 pro" , price : 5000 , num : 0 }  ,
                    {name : "iPone13 pro" , price : 4000 , num : 0 }  ,
                    {name : "iPone12 pro" , price : 3000 , num : 0 }  ,
                    {name : "iPone11 pro" , price : 2000 , num : 0 }  ,
                ] , 
                isShow : false 
            } ,
            methods : {
                add : function(index){
                    console.log("获取到的下标：" + index);
                    this.products[index].num ++ ;

                 
                } ,
                sub : function(index){
                    if(this.products[index].num > 0){
                        this.products[index].num --;
                     
                    }
                } ,
                remove : function(index){
                    this.products.splice(index , 1);
                    if( this.products.length <= 0 ){
                        this.isShow = true;
                    }
                },

               
            }
        });
    </script>
</body>
</html>