Vue实现购物车功能
更新时间：2017年04月27日 11:09:43 作者：1178291141
本篇文章主要分享了Vue实现购物车功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" />
</head>
<body>
<div id="app" class="container">
<table class="table">
<thead>
<tr>
<th>产品编号</th>
<th>产品名字</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item , index) in message">
<td @click="jia(index)">{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button type="button" class="btn tn-primary" @click="subtract(index)">-</button>
<input type="text" v-model="item.quantity">
<button type="button" class="btn tn-primary" @click="add(index)">+</button>
</td>
<td>{{item.price | filtermoney}}</td>
<!--<td>{{arr[index].one}}</td>-->
<td>{{item.price*item.quantity | filtermoney}}</td>
<td>
<button type="button" class="btn btn-danger" @click="remove(index)">移除</button>
</td>
</tr>
<tr>
<td>总购买价
</td>
<td>
{{animatenum | filtermoney}}
</td>
<td>总购买数量
</td>
<td>
</td>
<td colspan="2">
<button type="button" class="btn btn-danger" @click="empty()">清空购物车</button>
</td>
</tr>
</tbody>
</table>
<p v-if="message.length===0">您的购物车为空</p>
</div>
<script src="http://9i0i.com/pic.php?p=https://unpkg.com/tween.js@16.3.4"></script>
<script src="http://9i0i.com/pic.php?p=https://cdn.bootcss.com/vue/2.2.3/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
totalPrice:0,
animatenum:0,
message:[
{
id: 007,
name: 'iphone5s',
quantity: 3,
price: 4000
},{
id: 1340,
name: 'iphone5',
quantity: 9,
price: 3000
},{
id: 7758,
name: 'imac',
quantity: 4,
price: 7000
},{
id: 2017,
name: 'ipad',
quantity: 5,
price: 6000
}
]
},
watch:{
toComput2:function(newValue,oldValue){
this.tween(newValue,oldValue);
}
},
computed:{
//计算总金额
toComput2:function(){
var vm=this;
//每次进来要重置总金额
vm.totalPrice=0;
this.message.forEach(function(mess){
vm.totalPrice+=parseInt(mess.price*mess.quantity);
})
return this.totalPrice;
}
},
filters:{
filtermoney:function(value){
return '￥'+value ;
}
},
mounted:function(){
this.tween('97000','0');
},
methods:{
//计算总数的方法为什么写在methods里面就不行？
toComput:function(){
var vm=this;
vm.message.forEach(function(mess){
vm.totalPrice+=parseInt(mess.price*mess.quantity);
})
return vm.totalPrice;
},
add:function(index){
var vm=this;
vm.message[index].quantity++;
},
subtract:function(index){
var vm=this;
vm.message[index].quantity--;
if(vm.message[index].quantity<=0){
if (confirm("你确定移除该商品？")) {
vm.message.splice(index,1)
}
}
},
remove:function(index){
var vm=this;
if (confirm("你确定移除该商品？")) {
vm.message.splice(index,1)
}
},
empty:function(){
var vm=this;
vm.message.splice(0,vm.message.length);
},
jia:function(index){
var vm=this;
vm.arr[index].one++;
},
tween:function(newValue,oldValue){
var vm=this;
var twen=new TWEEN.Tween({animatenum:oldValue});
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
};
twen.to({animatenum:newValue},750);
twen.onUpdate(function(){
//toFixed();保留几位小数
vm.animatenum = this.animatenum.toFixed();
})
twen.start();
animate();
}
}
});
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持程序员之家!
相关文章
这篇文章主要为大家详细介绍了vue实现移动端省市区选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要为大家详细介绍了vue拖拽组件vuedraggable的使用说明，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue API中setup ref reactive函数使用教程
setup是用来写组合式api，内部的数据和方法需要通过return之后，模板才能使用。在之前vue2中，data返回的数据，可以直接进行双向绑定使用，如果我们把setup中数据类型直接双向绑定，发现变量并不能实时响应。接下来就详细看看它们的使用2022-12-12
这篇文章主要为大家详细介绍了vue+elementUI实现表格关键字筛选高亮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家详细介绍了基于vuejs+webpack的日期选择插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了Vue函数式组件及vue函数式组件的优缺点，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vue生命周期，文章通过结合案例更加的通俗易懂,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了Vue3文件拖拽上传功能,支持拖拽到此区域上传，支持选择多个文件/文件夹，代码很简单，对vue3拖拽上传功能感兴趣的朋友一起看看吧2022-10-10
这篇文章主要介绍了Vue中android4.4不兼容问题的解决方法,需要的朋友可以参考下2018-09-09
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论