Implement shopping cart function based on Vuejs-JS Tutorial-php.cn

Implement shopping cart function based on Vuejs

高洛峰

Release： 2017-02-04 13:38:37

Original

1100 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

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!