Home > Article > Web Front-end > Implement shopping cart function based on Vuejs

Implement shopping cart function based on Vuejs

高洛峰Original: 2017-02-04 13:38:371112browse

The example in this article shares the Vuejs shopping cart implementation code for your reference. The specific content is as follows

html:

<!DOCTYPE html>
<html>
<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>
 <template v-if="data.length">
  <h3>我的购物车：</h3>
  <div>
  <div>
   <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 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 &#39;$&#39; 2}}</span>
 </template>
 <template v-else>
  <div>
  <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:&#39;.container&#39;,
 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:&#39;IPhone 6&#39;,
 price:5466,
 id:1,
 count:1
 },
 {
 name:&#39;IMac&#39;,
 price:7466,
 id:2,
 count:1
 },
 {
 name:&#39;iPad&#39;,
 price:5400,
 id:3,
 count:1
 }
]

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will visit the PHP Chinese website.

For more articles related to implementing the shopping cart function based on Vuejs, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implement shopping cart function using Angularjs and bootstrapNext article：Implement shopping cart function using Angularjs and bootstrap

See more

Implement shopping cart function based on Vuejs

Related articles