基于Vuejs实现购物车功能


Posted in Javascript onAugust 02, 2016

本文实例为大家分享了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="js/vue.js"></script>
 <script src="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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
论JavaScript模块化编程
Mar 07 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 #Javascript
js简单时间比较的方法
Aug 02 #Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 #Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 #Javascript
关于微信中a链接无法跳转问题
Aug 02 #Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 #Javascript
常用的js验证和数据处理总结
Aug 02 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
python之super的使用小结
2018/08/13 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
包装类的功能、种类、常用方法
2012/01/27 面试题
Ejb技术面试题
2015/04/29 面试题
淘宝客服自我总结鉴定
2014/01/25 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
信用卡催款律师函
2015/05/27 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
导游词之太湖
2019/10/08 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers