基于Vuejs实现购物车功能
更新时间：2016年08月02日 12:48:36 作者：前端小菜bi
这篇文章主要为大家详细介绍了基于Vuejs实现购物车功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例为大家分享了Vuejs购物车实现代码，供大家参考，具体内容如下
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的vue购物车</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://9i0i.com/pic.php?p=js/vue.js"></script>
<script src="http://9i0i.com/pic.php?p=js/data.js"></script>
</head>
<body>
<div class="container">
<template v-if="data.length">
<h3>我的购物车：</h3>
<div class="product">
<div class="item">
<span class="btn btn-default">商品名称</span>
<span class="btn btn-default left">商品单价</span>
<span class="btn btn-default left">商品数量</span>
<span class="btn btn-default left">操作</span>
</div>
<div class="item" style="padding:5%;border: 1px solid black" v-for="item in data">
<span class="btn btn-default">{{item.name}}</span>
<span class="btn btn-default left" style="margin-left: 18%">{{item.price}}</span>
<span>
<em class="btn btn-primary add" v-on:click="add($index)" :class="{off:item.count==11}">+</em>
{{item.count}}
<em class="btn btn-primary reduce" v-on:click="reduce($index)" :class="{off:item.count==1}">-</em>
</span>
<span class="btn btn-danger left" v-on:click="remove(item)">移除</span>
</div>
</div>
<h2>清单：</h2>
<span class="btn btn-primary">商品总价：{{price |currency '$' 2}}</span>
</template>
<template v-else>
<div class="jumbotron">
<h1>您的购物车空了</h1>
<p>是否去重新挑选</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">重新挑选</a></p>
</div>
</template>
</div>
</body>
<script>
new Vue({
el:'.container',
data:{
data:data
},
computed:{
price:function () {
var price = 0;
for(var i=0;i<this.data.length;i++){
var self = this.data[i];
price += self.count * self.price;
}
return price;
}
},
methods:{
add:function ($index) {
var self = this.data[$index];
if(self.count >10){
return false;
}
self.count++;
},
reduce:function($index){
var self = this.data[$index];
if(self.count <= 1){
return false
}
self.count--;
},
remove:function(item){
this.data.$remove(item);
}
}
})
</script>
</html>
css:
h3{
text-align: center;
}
.left{
margin-left: 14%;
}
.item{
text-align: center;
padding: 3%;
}
.add{
margin-left: 15%;
}
.off{
background-color: lightgrey;
border: 1px solid lightgrey;
}
js:
/**
* Created by Administrator on 2016/7/29.
*/
var data = [
{
name:'IPhone 6',
price:5466,
id:1,
count:1
},
{
name:'IMac',
price:7466,
id:2,
count:1
},
{
name:'iPad',
price:5400,
id:3,
count:1
}
]
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了vue如何将html内容转为图片并下载到本地，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了浅谈针对Vue相同路由不同参数的刷新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
当我们在开发一个大型的前端应用时,动态路由权限是一个必不可少的功能,本文将介绍如何使用Vue 3和TypeScript来实现动态路由权限,希望对大家有所帮助2024-01-01
这篇文章主要为大家详细介绍了vue实现tab栏点击高亮效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了vue中的keep-alive内置组件缓存，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,下面这篇文章主要给大家介绍了关于Vue3中动态修改样式与级联样式优先顺序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
近期由于公司项目的需要开始研究国密SM4加密,下面这篇文章主要给大家介绍了关于如何使用sm4js进行加密和国密sm4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于vue?element-plus图片预览实现的相关资料,最近的项目中有图片预览的场景,也是踩了一些坑,在这里总结一下,需要的朋友可以参考下2023-07-07
在本篇文章里小编给大家整理的是关于Vue+Vuex实现自动登录的知识点详解，需要的朋友们可以学习下。2020-03-03
这篇文章主要介绍了vue prop传值类型检验方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论