ホームページ > 記事 > ウェブフロントエンド > Vuejsをベースにショッピングカート機能を実装

Vuejsをベースにショッピングカート機能を実装

高洛峰オリジナル: 2017-02-04 13:38:371112ブラウズ

この記事の例では、参考のために Vuejs ショッピングカートの実装コードを共有します。具体的な内容は次のとおりです

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

上記がこの記事の全内容です。皆様の学習にお役に立てれば幸いです。皆様もぜひ PHP 中国語 Web サイトをご覧ください。

Vuejs に基づくショッピングカート機能の実装に関するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Angularjsとブートストラップを使用してショッピングカート機能を実装する次の記事：Angularjsとブートストラップを使用してショッピングカート機能を実装する

続きを見る

Vuejsをベースにショッピングカート機能を実装

関連記事