Vue 购物车案例
本篇描述 vue实现购物车小案例，有兴趣的小伙伴可以参考一下，小编用了两种方法实现 字符串拼接和过滤器，主要体现在price上样式代码<style>.box{width: 800px;margin: 50px auto;text-align: center;}button{margin: 5px;}</style>方式一 html
·
本篇描述 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>
- 效果图如下
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)