基于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中live方法的重复绑定说明
Oct 21 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
js实现内置计时器
2019/12/16 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
品牌转让协议书
2014/08/20 职场文书
工资收入证明
2014/10/07 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技