vue實現的仿淘寶購物車功能詳解

2019-11-19 12:13:26

字體：大中小

來源：轉載

供稿：網友

本文實例講述了vue實現的仿淘寶購物車功能。分享給大家供大家參考，具體如下：

下面是一張眾所周知的淘寶購物車頁面，今天要講解的案例就是用vue.js做一個類似的頁面

首先簡單介紹一下可能會用到的一些vue.js的用法：

v-bind，綁定屬性；例如v-bind:class="{'class1':flag}"，這是常用的綁定樣式的方法，如果flag為true則class=class1；v-bind:src="image",image就是圖像的路徑;

v-if="flag"與v-show="flag"，如果flag為true，則綁定的為“可見”，不同的是v-show是一開始就渲染在DOM中的，改變的則是它的display而已，而v-if為false則是從HTML代碼中移除；

v-on:或@，樣式綁定v-on:click="dosomething()"或者@click="dosomething()"，點擊觸發dosomething函數；

v-for循環，v-for="item in items"，items為數組，item為items數組的值而不是索引；

要注意的是當this作用域的改變：當this作用域改變是我們設置var self = this，在之后的使用中用self代替；

下面是HTML代碼：

<html>  <head>    <title>購物車</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <link rel="stylesheet" type="text/css" href="shop.css" rel="external nofollow" >  </head>  <body>    <div id="app">      <div class="header"><span style="margin-left: 75px;">商品</span><span style="margin-left: 70px;">單價</span><span style="margin-left: 35px;">數量</span><span style="margin-left: 40px;">總價</span></div>      <div v-for="item in goods">      <div class="show" v-show="item.selected">        <span class="choice" v-bind:class="{'checked':item.checked}" @click="check(item)"></span>        <div style="float:left;margin-left: 20px;"><img v-bind:src="item.image" v-bind:alt="item.alt" class="image"/><span class="text">{{item.name}}</span></div>        <span style="float:left;margin-left: 20px;margin-top:20px;width:40px;">{{item.price}}元</span>        <div style="float:left;margin-left: 30px;margin-top: 20px;">          <span v-on:click="changeNum(item,-1)"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >-</a></span>          <input v-model="item.number" class="output" disabled/>          <span v-on:click="changeNum(item,1)"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >+</a></span>        </div>        <div style="float:left;margin-left: 30px;margin-top: 25px;width:51px;">￥{{item.price * item.number}}元</div>        <span class="icon" @click="seen=true"></span>      </div>      </div>      <!--footer-->      <div id="footer">       <span class="choice" style="margin-top:18px;" v-bind:class="{'checked':checkAllFlag}"></span>        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="checkAll(true)">全選</a>        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:;" @click="checkAll(false)">取消全選</a>        <span style="display:inline-block;margin-left:70px;width:95px;">Total:￥{{totalAll}}元</span>        <span><button class="count">結 算</button></span>      </div>         <div id="info" v-show="seen">       <p style="margin-top:20px;">是否刪除該商品?</p><div class="close" @click="seen=false">×</div>       <button class="get" style="padding-left:10px;" @click="">yes</button><button class="get" style="margin-left:20px;" @click="seen=false">no</button>      </div>        <div class="shadow" v-show="seen"></div>     </div>  </body>  <script src="./src/vue.min.js"></script>  <script src="./src/vue-resource.min.js"></script>  <script src="shop.js"></script></html>

下面的是js的代碼：

var vm = new Vue({    el:'#app',    data:{      total: 0,      totalAll: 0,      goods: [],//商品為數組      checkAllFlag: false,      seen: false,      delFlag: true    },    mounted: function () {      this.goodlist();    },    methods:{      //改變商品數量      changeNum:function (item,flag) {              if (flag>0) {                item.number++;                }else{                 item.number--;                 if(item.number<1){                 item.number = 1;                 }                     }              this.totalMoney();      },      //是否選中      check:function (item) {       if(typeof item.checked == 'undefined'){       this.$set(item,"checked",true);          //局部為item添加“checked”，值為true       }else{       item.checked = !item.checked;       }       this.totalMoney();      },      //通過$http.get方法ajax地交互獲取商品信息，一定要引入vue-resource組件      goodlist:function () {         var self = this;        this.$http.get("shop.json").then(function (res) {          self.goods = res.data.result.goods;        },function () {          console.log("failed");        });      },      //是否全選      checkAll:function (flag) {       this.checkAllFlag = flag;       var self = this;       this.goods.forEach(function(value,index){        if(typeof value.checked == 'undefined'){           self.$set(value,"checked",self.checkAllFlag);           }else{           value.checked = self.checkAllFlag;           }       });       this.totalMoney();      },      //結算選中商品的價格      totalMoney:function () {        //初始化總價       this.totalAll = 0;       var self =this;        //通過foreach循環判斷是否被選中       this.goods.forEach(function(value,index){       if(value.checked){        self.totalAll += value.price * value.number;       }       });      }    }})

下面是CSS代碼：

*{padding: 0;margin: 0;}a{text-decoration: none;color: black;}#app{width: 500px;height: 600px;border: 1px solid;position: absolute;margin-top:20px;margin-left:50px;}.header{width: 500px;height: 30px;line-height: 30px;background-color: darkmagenta;}.header span{display: inline-block;width: 50px;height: 30px;}.show{width: 500px;height: 85px;margin-top: 5px;}#footer{position: absolute;bottom: 0;width: 500px;height: 50px;background-color: #c7c7c9;}.output{width: 40px;height: 20px;}.image{width: 60px;height: 80px;float:left;}.choice{display: inline-block;width: 15px;height: 15px;border-radius: 15px;border: 1px solid;float: left;margin-top: 30px;margin-left: 20px;}.checked{background-color: darkorange;}.icon{background-image: url(del.png);display: inline-block;width: 30px;height: 30px;margin-left: 50px;margin-top: 20px;}.text{display:inline-block;width:50px;height:20px;line-height:20px;font:12px;margin-top:20px;margin-left:5px;float:left;}.count{width:100px;height:40px;background-color:red;line-height:40px;font-size:16px;margin-left:40px;margin-top:5px;}#footer a{display:inline-block;margin-left:5px;height:22px;}#info{width:250px;height:100px;position:absolute;border:1px solid;margin-top:-250px;margin-left:120px;background-color:#c7c7c9;text-align:center;z-index:999;}.get{width:80px;height:30px;font:17px;margin-top:10px;}.shadow{width:100%;height:100%;background-color:black;opacity:0.8;margin-top:-480px;z-index:1;}.close{position:absolute;right:2px;top:-5px;cursor:pointer;}

下面是json代碼：

{ "status":1, "result":{ "total":50,   "goods":[     {       "name":"香煙",       "price":15,       "number":1,       "selected": true,       "image": "./img/xiangyan.jpg",       "alt": "香煙"     },     {       "name": "啤酒",       "price": 12,       "number": 1,       "selected": true,       "image": "./img/pjiu.jpg",       "alt": "啤酒"     },     {       "name": "打火機",       "price": 2,       "number": 1,       "selected": true,       "image": "./img/fire.jpg",       "alt": "打火機"     },     {       "name": "雞腿",       "price": 5,       "number": 1,       "selected": true,       "image": "./img/chick.jpg",       "alt": "雞腿"     },     {       "name": "垃圾袋",       "price": 8,       "number": 1,       "selected": true,       "image": "./img/bush.jpg",       "alt": "垃圾袋"     }   ]  },  "message":""}

實現的結果如下圖：