1、截图
2、address.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta charset="utf-8"> <!-- Always force latest IE rendering engine or request Chrome Frame --> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Checkout - Confirm Address</title> <link href="css/base2.css" rel="stylesheet" > <link href="css/checkout.css" rel="stylesheet" > </head> <body class="checkout"> <div class="container"> <div class="addr-list-wrap"> <div class="addr-list"> <ul> <li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"> <div class="addr-opration addr-set-default"> <a href="javascript:;" class="addr-set-default-btn" v-if="!item.isDefault" @click="setDefault(item.addressId);"><i>设为默认</i></a> </div> <div class="addr-opration addr-default" v-if="item.isDefault">默认地址</div> </li> <!-- shipping method--> <div class="checkout-title"> <span>配送方式</span> </div> <div class="shipping-method-wrap"> <div class="shipping-method"> <ul> <li :class="{'check':shippingMethod==1}" @click="shippingMethod=1"> <!--注意绑定是{}和‘’--> <div class="name" >标准配送</div> <div class="price">Free</div> </li> <li :class="{'check':shippingMethod==2}" @click="shippingMethod=2"> <div class="name" >高级配送</div> <div class="price">180</div> </li> </ul> </div> </div> </div> </div> <script src="js/lib/vue.min.js"></script> <script src="js/lib/vue-resource.min.js"></script> <script src="js/address.js"></script> </body> </html>
3、address.js
/** * Created by kk on 2017/4/20. */ new Vue({ el:".container", data:{ limitNum:3, addressList:[], currentIndex:0, shippingMethod:1 }, mounted:function () { this.$nextTick(function(){ // alter(); this.getAddressList(); }); }, computed:{ filterAddress:function () { return this.addressList.slice(0,this.limitNum); // 方法和属性需要加this，不然会找不到 } }, methods:{ setDefault:function (addressId) { this.addressList.forEach(function (address,index) { if(address.addressId==addressId) { address.isDefault=true; } else{ address.isDefault=false; } }) } } });