Heim > Artikel > Web-Frontend > So bedienen Sie vue2, um die Warenkorb- und Adressauswahl zu implementieren
Dieses Mal zeige ich Ihnen, wie Sie vue2 bedienen, um die Warenkorb- und Adressauswahl zu realisieren ein Blick.
Zuallererst die Vue Basic Js-Schreibmethodenew Vue({
el:"#app",
//模型
data:{
},
filters:{
},
mounted:function(){
this.$nextTick(function(){
//初始化调用
});
},
computed:{
//实时计算
},
methods:{
}
});
<li v-for="(item,index) in productList">
<p class="item-name">{{item.productName}}</p>
</li>
(Echtzeit-Update)
<input type="text" value="0" disabled v-model="item.productQuantity"> <p class="item-price-total">{{item.productQuantity}}</p>v-bind
<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}">
<!--可通过更改item.checked的值设置是否选中-->
<!--必须用v-bind 不可直接在class里面直接使用{{}}-->
<!--v-bind:class= 可简写为 :class= -->
<p class="item-price">{{item.productPrice | money('元')}}</p>
filters:{
formatMoney:function(value,type){
return "¥"+value.toFixed(2)+ type;
}
},
Vue.filter("money",function(value,type){
return "¥"+value.toFixed(2) + type; //保留两位小数 结果eg:¥19.00元
});
Methode in Methoden aufrufen:
@click="method(param)" //或者 @click="delFlag=false" @click="limitNum=addressList.length"
berechnet real -time Die Berechnung lautet wie folgt: Standardmäßig werden drei Datenelemente angezeigt. Klicken Sie auf „Mehr“, um alle anzuzeigen
<li v-for="(item,index) in filterAddress"> <p 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> </p> data:{ limitNum:3 }, computed:{ filterAddress:function(){ return this.addressList.slice(0,this.limitNum); } },
Stellen Sie zunächst ein oder zwei klassische Beispiele vor
1. Folgendes wird implementiert: Klicken Sie, um die Schleifenkarte auszuwählen
<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"> <!--其中currentIndex在js里需要定义-->
2. Folgendes implementiert den Klick, um die feste Karte auszuwählen
<ul> <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1"> <p class="name">标准配送</p> <p class="price">Free</p> </li > <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2"> <p class="name">高级配送</p> <p class="price">180</p> </li> </ul> <!--其中shippingMethod在js里需要定义-->
Off topic: Da ich ein Anfänger, ich werde ein wenig lernen und das Hilfs-Popup-Feld aufzeichnen
1. Rufen Sie die Backend-Methode auf<p class="md-overlay" v-if="delFlag"></p>
2.
Loop
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; });Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Dinge finden Sie unter php Chinese Andere verwandte Artikel online!
Empfohlene Lektüre: Wie man Angular zum Rendern auf der Serverseite verwendet
Wie man Vue verwendet, um alles zu implementieren Auswahl und inverse AuswahlDas obige ist der detaillierte Inhalt vonSo bedienen Sie vue2, um die Warenkorb- und Adressauswahl zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!