vue例項--仿淘寶購物車
阿新 • • 發佈：2018-12-16
下面是一張眾所周知的淘寶購物車頁面，今天要講解的案例就是用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"> </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)">-</a></span> <input v-model="item.number" class="output" disabled/> <span v-on:click="changeNum(item,1)"><a href="javascript:void(0)">+</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)" @click="checkAll(true)">全選</a> <a href="javascript:void(0)" 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":""
}實現的結果如下圖：
