Heim > Web-Frontend > js-Tutorial > Hauptteil

vue2 implementiert die Auswahl der Warenkorbadresse

php中世界最好的语言
Freigeben: 2018-06-12 15:08:01
Original
2336 Leute haben es durchsucht

Dieses Mal werde ich Ihnen vue2 zur Implementierung der Warenkorb-Adressauswahl vorstellen. Welche Vorsichtsmaßnahmen gibt es für vue2, um die Warenkorb-Adressauswahl zu implementieren?

Zuallererst die Vue Basic Js-Schreibmethode

new Vue({
  el:"#app",
  //模型
  data:{
  },
  filters:{
  },
  mounted:function(){
    this.$nextTick(function(){
    //初始化调用
    });
  },
  computed:{
    //实时计算
  },
  methods:{
  }
});
Nach dem Login kopieren

v-for

<li v-for="(item,index) in productList">
  <p class="item-name">{{item.productName}}</p>
</li>
Nach dem Login kopieren

V-Modell

(Echtzeit-Update)

<input type="text" value="0" disabled v-model="item.productQuantity">
<p class="item-price-total">{{item.productQuantity}}</p>
Nach dem Login kopieren

v-bind

<a href="javascript:;" class="item-check-btn" v-bind:class="{&#39;check&#39;:item.checked}">
<!--可通过更改item.checked的值设置是否选中-->
<!--必须用v-bind 不可直接在class里面直接使用{{}}-->
<!--v-bind:class= 可简写为 :class= -->
Nach dem Login kopieren

Filterverwendung

1.html-Referenzmethode

<p class="item-price">{{item.productPrice | money('元')}}</p>
Nach dem Login kopieren

2. Filter

filters:{
  formatMoney:function(value,type){
    return "¥"+value.toFixed(2)+ type;
  }
},
Nach dem Login kopieren

3. Globaler Filter (außerhalb von New Vue geschrieben)

Vue.filter("money",function(value,type){
  return "¥"+value.toFixed(2) + type; //保留两位小数 结果eg:¥19.00元
});
Nach dem Login kopieren

Methode in Methoden aufrufen:

@click="method(param)"
//或者
@click="delFlag=false"
@click="limitNum=addressList.length"
Nach dem Login kopieren

berechnete Echtzeitberechnung

Wie folgt: Standardmäßig werden drei Daten 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);
  }
},
Nach dem Login kopieren

Stellen Sie zunächst ein oder zwei klassische Beispiele vor

Die folgenden Implementierungen Klick-Auswahl der Loop-Karten

<li v-for="(item,index) in filterAddress" v-bind:class="{&#39;check&#39;:index==currentIndex}" 
@click="currentIndex=index">
<!--其中currentIndex在js里需要定义-->
Nach dem Login kopieren

2. Das Folgende implementiert die Klick-Auswahl der festen Karte

<ul>
  <li v-bind:class="{&#39;check&#39;:shippingMethod==1}" @click="shippingMethod=1">
   <p class="name">标准配送</p>
   <p class="price">Free</p>
  </li >
  <li v-bind:class="{&#39;check&#39;:shippingMethod==2}" @click="shippingMethod=2">
   <p class="name">高级配送</p>
   <p class="price">180</p>
  </li>
 </ul>
 <!--其中shippingMethod在js里需要定义-->
Nach dem Login kopieren

Off-Topic: Da ich ein Anfänger bin, werde ich ein wenig lernen, und ich zeichnet auch die Schreibmethode der Hilfs-Popup-Box-Maskenebene auf

<p class="md-overlay" v-if="delFlag"></p>
Nach dem Login kopieren

Die js-Syntax von Vue2 wird zur leichteren Referenz veröffentlicht

1. Rufen Sie die Backend-Methode auf

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;
});
Nach dem Login kopieren

2. forEach-Schleife

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);//全局注册
  }
});
Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die Kommunikation mit gemeinsam genutzten Angular4-Komponenten

Konvertieren Sie JSON- und Array-Schlüsselwerte in obere und Kleinbuchstaben

Das obige ist der detaillierte Inhalt vonvue2 implementiert die Auswahl der Warenkorbadresse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage