溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue怎么實(shí)現(xiàn)的仿淘寶購(gòu)物車功能

發(fā)布時(shí)間：2021-04-23 12:25:08 來源：億速云 閱讀：221 作者：小新 欄目：web開發(fā)

小編給大家分享一下vue怎么實(shí)現(xiàn)的仿淘寶購(gòu)物車功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

具體如下：

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

vue怎么實(shí)現(xiàn)的仿淘寶購(gòu)物車功能

首先簡(jiǎn)單介紹一下可能會(huì)用到的一些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()"，點(diǎn)擊觸發(fā)dosomething函數(shù)；

v-for循環(huán)，v-for="item in items"，items為數(shù)組，item為items數(shù)組的值而不是索引；

要注意的是當(dāng)this作用域的改變：當(dāng)this作用域改變是我們?cè)O(shè)置var self = this，在之后的使用中用self代替；

下面是HTML代碼：

<html>
  <head>
    <title>購(gòu)物車</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 >商品</span><span >單價(jià)</span><span >數(shù)量</span><span >總價(jià)</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 ><img v-bind:src="item.image" v-bind:alt="item.alt" class="image"/><span class="text">{{item.name}}</span></div>
        <span >{{item.price}}元</span>
        <div >
          <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 >￥{{item.price * item.number}}元</div>
        <span class="icon" @click="seen=true"></span>
      </div>
      </div>
      <!--footer-->
      <div id="footer">
       <span class="choice"  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"  @click="checkAll(false)">取消全選</a>
        <span >Total:￥{{totalAll}}元</span>
        <span><button class="count">結(jié)&nbsp;算</button></span>
      </div>   
      <div id="info" v-show="seen">
       <p >是否刪除該商品?</p><div class="close" @click="seen=false">&times</div>
       <button class="get"  @click="">yes</button><button class="get"  @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: [],//商品為數(shù)組
      checkAllFlag: false,
      seen: false,
      delFlag: true
    },
    mounted: function () {
      this.goodlist();
    },
    methods:{
      //改變商品數(shù)量
      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();
      },
      //結(jié)算選中商品的價(jià)格
      totalMoney:function () {
        //初始化總價(jià)
       this.totalAll = 0;
       var self =this;
        //通過foreach循環(huán)判斷是否被選中
       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": "打火機(jī)",
       "price": 2,
       "number": 1,
       "selected": true,
       "image": "./img/fire.jpg",
       "alt": "打火機(jī)"
     },
     {
       "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":""
}

實(shí)現(xiàn)的結(jié)果如下圖：

vue怎么實(shí)現(xiàn)的仿淘寶購(gòu)物車功能

以上是“vue怎么實(shí)現(xiàn)的仿淘寶購(gòu)物車功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手