基于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 相关文章推荐
JQuery触发事件例如click
Sep 11 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
Three.js学习之网格
Aug 10 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
理解JS绑定事件
2016/01/19 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
详解python中的json和字典dict
2018/06/22 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python字符串反转的四种方法详解
2019/12/02 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
四风问题查摆剖析材料
2014/10/11 职场文书
财务工作失职检讨书
2014/11/21 职场文书
贫困证明怎么写
2015/06/16 职场文书