Vue 购物车案例

最新推荐文章于 2024-02-22 10:01:20 发布

`Pluto.

最新推荐文章于 2024-02-22 10:01:20 发布

阅读量2.5k

点赞数 7

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/iron_nini/article/details/121077605

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本篇描述 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>

效果图如下

`Pluto.

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
Vue 购物车案例

本篇描述 vue实现购物车小案例，有兴趣的小伙伴可以参考一下，小编用了两种方法实现字符串拼接和过滤器，主要体现在price上样式代码<style> .box{ width: 800px; margin: 50px auto; text-align: center; } button{margin: 5px;} </style>方式一 html
复制链接

扫一扫