Vuejs实现购物车功能实例

人气：873 时间：2019-02-24

这篇文章主要为大家详细介绍了Vuejs实现购物车功能实例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

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

End q1010.com

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;
}

End q1010.com

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
 }
]

End q1010.com

本文来自：http://www.q1010.com/184/2970-0.html

注：关于Vuejs实现购物车功能实例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：VUEJS修复错误并且美化时间（2）

下一篇：VUEJS利用laypage插件实现分页（3）