基于Vuejs实现购物车功能

2019-11-20 09:19:54

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现图片缓慢放大缩小效果

下一篇：js实现统计字符串中特定字符出现个数的方法