首先，vue基礎js寫法
new Vue({ el:"#app", //模型 data:{ }, filters:{ }, mounted:function(){ this.$nextTick(function(){ //初始化調用 }); }, computed:{ //實時計算 }, methods:{ }});v-for
<li v-for="(item,index) in productList"> <div class="item-name">{{item.productName}}</div></li>v-model
(實時更新)
<input type="text" value="0" disabled v-model="item.productQuantity"><div class="item-price-total">{{item.productQuantity}}</div>v-bind
<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}"><!--可通過更改item.checked的值設置是否選中--><!--必須用v-bind 不可直接在class里面直接使用{{}}--><!--v-bind:class= 可簡寫為 :class= -->filters過濾器的使用
1.html引用方式
<div class="item-price">{{item.productPrice | money('元')}}</div>2.過濾器
filters:{ formatMoney:function(value,type){ return "￥"+value.toFixed(2)+ type; }},3.全局過濾器（寫在new Vue的外面）
Vue.filter("money",function(value,type){ return "￥"+value.toFixed(2) + type; //保留兩位小數 結果eg:￥19.00元});調用methods中的方法：
@click="method(param)"http://或者@click="delFlag=false"@click="limitNum=addressList.length"
computed 實時計算
如下：默認顯示三條數據，點擊more 顯示所有
<li v-for="(item,index) in filterAddress"><div class="shipping-addr-more"><a class="addr-more-btn up-down-btn" href="javascript:" @click="limitNum=addressList.length"> more <i class="i-up-down"> <i class="i-up-down-l"></i> <i class="i-up-down-r"></i> </i> </a></div>data:{ limitNum:3 },computed:{ filterAddress:function(){ return this.addressList.slice(0,this.limitNum); }},先提出一兩個經典的實例
1.以下實現了對循環卡片的點擊 選中
<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"><!--其中currentIndex在js里需要定義-->2.以下實現了對固定卡片的點擊 選中
<ul> <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1"> <div class="name">標準配送</div> <div class="price">Free</div> </li > <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2"> <div class="name">高級配送</div> <div class="price">180</div> </li> </ul> <!--其中shippingMethod在js里需要定義-->題外話：由于本人小白，學一點是一點，額外記錄一下輔助彈出框 遮罩層的寫法
<div class="md-overlay" v-if="delFlag"></div>
vue2的js語法 貼幾個 方便查用
1.調用后端方法
var _this = this;this.$http.get("data/address.json").then(function(response){ _this.addressList = response; //這里不能直接用this 此this非彼this 所以只能聲明_this}); //以下為ES6寫法，就可以直接用this了let _this = this; //沒用，就放這看看~this.$http.get("data/cartData.json",{"id":123}).then(res=>{ this.productList = res.data.result.list;});2.forEach循環
this.productList.forEach(function(item,index){ if(typeof item.checked == 'undefined'){ //如果item中沒有checked屬性 在item對象中添加checked屬性，值為true _this.$set(item,"checked",true);//局部注冊 Vue.set(item,"checked",true);//全局注冊 }});附上鏈接：碼云地址vue2_study
總結
以上所述是小編給大家介紹的使用vue2實現購物車和地址選配功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
