So binden Sie Klassennamen in WeChat-Miniprogrammen dynamisch

Dieses Mal zeige ich Ihnen, wie Sie Klassennamen in WeChat-Miniprogrammen dynamisch binden und welche Vorsichtsmaßnahmen für die dynamische Bindung von Klassennamen in WeChat-Miniprogrammen gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Bei der Entwicklung des Miniprogramms bin ich auf ein solches Problem gestoßen...

Als die Rangliste erstellt wurde, hatten die ersten drei unterschiedliche Stile, während der Rest den gleichen Stil hatte. Aber sie durchquerten alle dasselbe Element und es blieb stecken. Später entdeckte ich das Konzept der Modulmodularität, überprüfte die API und erstellte sie im Handumdrehen.

bedeutet, dass die Stile über unterschiedlichen Rankings die Wirkung entsprechend der tatsächlichen Situation anzeigen.

Modularisierung

Wir können allgemeinen Code als Modul in eine separate js-Datei extrahieren. Module können Schnittstellen nur über module.exports oder exports der Außenwelt zugänglich machen.

Für Laien ist es unabhängig von sich selbst. Der Bereich wirkt nur auf dieses Modul und beeinflusst sich nicht gegenseitig mit js.

Hauptcode

Modulteil

<wxs module="rank">
 var indexof = function(index){
 switch(index){
 case 0:
 return 'first-price';
 break;
 case 1: 
 return 'second-price';
 break;
 case 2: 
 return 'third-price';
 break;
 }
 };
 module.exports.style = indexof;
 </wxs>

Ansicht

 <view class="weui-badge {{rank.style(index)}}">{{index + 1}}</view>

Ergänzung:

Einige Unterschiede zwischen Vue und WeChat-Applet

1. Bedingtes Rendering

vue: Verwenden Sie die v-if-Anweisung, v-else stellt den else-Block von v-if dar, v-else-if stellt den „else-if-Block“ von v-if dar

 <p v-if="type === &#39;A&#39;">
  A
 </p>
 <p v-else-if="type === &#39;B&#39;">
  B
 </p>
 <p v-else-if="type === &#39;C&#39;">
  C
 </p>
 <p v-else>
  Not A/B/C
 </p>

WeChat-Applet: Verwenden Sie wx:if , wx:else repräsentiert den else-Block von wx:if, wx:elif repräsentiert den „else-if“-Block von wx:if

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

2. Versteckte Elemente anzeigen

VUE:v-show="..."

WeChat-Applet: hidden="{{...}}"

3. Bindungsklasse

vue: Verwenden Sie v-bind vollständig oder abgekürzt als: bind, getrennt vom Original Klasse Schreiben Sie

<p class="test" v-bind:class="{ active: isActive }"></p>

WeChat-Applet:

<view class="test {{isActive ? &#39;active&#39;:&#39;&#39; }}"></view>

4. Ereignisverarbeitung

VUE: Verwenden Sie v-on:event, um Ereignisse zu binden, oder verwenden Sie @ Ereignisbindungsereignis

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡

WeChat-Applet: Verwenden Sie bindtap(bind+event)， oder catchtap(catch+event), um das Ereignis

<button bindtap="clickMe">点击我</button>
<button catchtap="clickMe">点击我</button> //阻止事件冒泡

zu binden. 5. Bindungswert

VUE: Wann Vue bindet den Wert einer Variablen dynamisch an ein Attribut eines Elements. Vor der Variablen wird ein Doppelpunkt eingefügt: Beispiel: <img :src="imgSrc"/>

WeChat-Applet: Binden Sie eine Variable, wenn der Wert ein ist Elementattribut, es wird in zwei geschweifte Klammern eingeschlossen. Beispiel: <image src="{{imgSrc}}"></image>

6. Übergabe von Parametern für Bindungsereignisse

VUE: Wenn Sie Parameter an die Funktion des Vue-Bindungsereignisses übergeben, können Sie die Parameter nach dem schreiben Funktion

<p @click="changeTab(1)">哈哈</p>

WeChat-Applet in Klammern: Ich habe versucht, nur den Funktionsnamen an die Ereignisse des WeChat-Applets zu übergeben. Der Funktionswert kann an das Element gebunden werden und

<view data-tab="1" catchtap="changeTab">哈哈</view>

erhalten js in der Funktion :

changeTab(e){
  var _tab = e.currentTarget.dataset.tab; 
}

7. Wert einstellen

VUE: Sie können damit den Wert von test festlegen, this.test = true ; Sie können es verwenden, um den Wert von test zu erhaltenthis.test.

WeChat-Applet: Um den Wert von test festzulegen, verwenden Sie this.setData({test:true});, um den Wert von test zu erhalten, verwenden Sie this.data.test

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So rufen Sie Bibliotheken von Drittanbietern in Angular auf

So verwenden Sie ng-animate und ng -Cookies im Angular-Einsatz

Das obige ist der detaillierte Inhalt vonSo binden Sie Klassennamen in WeChat-Miniprogrammen dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!