本篇描述 vue实现购物车小案例,有兴趣的小伙伴可以参考一下,小编用了两种方法实现 字符串拼接和过滤器,主要体现在price上

  • 样式代码
<style>
        .box{
            width: 800px;
            margin: 50px auto;
            text-align: center;
        }
        button{margin: 5px;}
    </style>
  • 方式一 html代码部分
<body>
    <div id="app">
        <div class="box" v-if="arr.length">
            <h1>购物车</h1>
            <table border = "1" style="width: 100%;" cellspacing="0">
                <thead>
                    <tr style="height: 40px;">
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody  >
                // 循环渲染数据
                    <tr style="height: 40px;" v-for="(k,index) in arr" >
                        <td>{{k.id}}</td>
                        <td>{{k.name}}</td>
                        <td>{{k.time}}</td>
                        <td>
                            ¥{{k.price}}
                        </td>
                        <td>
                            <button :disabled="k.count<=1" @click="des(index)"> - </button>
                            {{k.count}}
                            <button @click="add(index)"> + </button>
                        </td>
                        <td>
                            <button @click="del(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价格:¥ {{totalPrice}} </h2>
        </div>
        <h2 v-else>购物车为空</h2>
    </div>
  • 方式一 vue部分
<script src="js/vue.2.6.js"></script>
<script>
	new Vue({
		data:{
			arr:[
                    {id:1,name:"《算法导论》",time:"2006-9",price:"85.00",count:1},
                    {id:2,name:"《UNIX编程艺术》",time:"2006-2",price:"59.00",count:1},
                    {id:3,name:"《编程珠玑》",time:"2008-10",price:"39.00",count:1},
                    {id:4,name:"《代码大全》",time:"2006-3",price:"128.00",count:1}
	        ],
		},
		// 计算属性求总价格
		computed:{
			totalPrice(){
                 let money = 0;
                 for(let i=0;i<this.arr.length;i++){
                      money += this.arr[i].price*this.arr[i].count
                  }
                  // toFixed(num)可把Number四舍五入为指定小数位数的数字
                  return money.toFixed(2)
              },
		},
		methods:{
                // 删除数据
                del(index){
                    this.arr.splice(index,1)
                },
                // 增加数量
                add(index){
                    this.arr[index].count++;
                },
                // 减少数量
                des(index){
                    this.arr[index].count--;
                }
            },
	}).$mount("#app")
</script>
  • 使用自定义过滤器 代码如下
html代码部分:
<body>
    <div id="app">
        <div class="box" v-if="arr.length">
            <h1>购物车</h1>
            <table border = "1" style="width: 100%;" cellspacing="0">
                <thead>
                    <tr style="height: 40px;">
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody  >
                // 循环渲染数据
                    <tr style="height: 40px;" v-for="(k,index) in arr" >
                        <td>{{k.id}}</td>
                        <td>{{k.name}}</td>
                        <td>{{k.time}}</td>
                        <td>
                        // 过滤器管道
                            {{k.price | showPrice}}
                        </td>
                        <td>
                            <button :disabled="k.count<=1" @click="des(index)"> - </button>
                            {{k.count}}
                            <button @click="add(index)"> + </button>
                        </td>
                        <td>
                            <button @click="del(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价格:{{totalPrice | showPrice}}} </h2>
        </div>
        <h2 v-else>购物车为空</h2>
    </div>

vue 代码部分

<script src="js/vue.2.6.js"></script>
<script>
	new Vue({
		data:{
			arr:[
                    {id:1,name:"《算法导论》",time:"2006-9",price:85,count:1},
                    {id:2,name:"《UNIX编程艺术》",time:"2006-2",price:59,count:1},
                    {id:3,name:"《编程珠玑》",time:"2008-10",price:39,count:1},
                    {id:4,name:"《代码大全》",time:"2006-3",price:128,count:1}
	        ],
		},
		computed:{
                totalPrice(){
                    return this.arr.reduce(function(preValue,arr){  // reduce() 将数组的值减为单个值,从左到右
                        return preValue + arr.price * arr.count
                    },0)
                }
        },
        filters:{    // 格式化输出金额的过滤器
                showPrice(price){    // 参数是要过滤的东西
                    return '¥'+ price.toFixed(2)
               }
        },
		methods:{
                // 删除数据
                del(index){
                    this.arr.splice(index,1)
                },
                // 增加数量
                add(index){
                    this.arr[index].count++;
                },
                // 减少数量
                des(index){
                    this.arr[index].count--;
                }
            },
        
	}).$mount("#app")
</script>
  • 效果图如下
    在这里插入图片描述
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐