Comment lier dynamiquement les noms de classe dans les mini-programmes WeChat

Cette fois, je vais vous montrer comment lier dynamiquement les noms de classe dans les mini-programmes WeChat, et quelles sont les précautions à prendre pour lier dynamiquement les noms de classe dans les mini-programmes WeChat. Ce qui suit est un cas pratique, jetons un coup d'œil.

J'ai rencontré un tel problème lors du développement du mini programme...

Lorsque le classement a été élaboré, les trois premiers avaient des styles différents, tandis que les autres avaient le même style. Mais ils ont tous traversé le même élément, et celui-ci est resté bloqué. Plus tard, j'ai découvert le concept de modularité des modules, j'ai donc vérifié l'API et l'ai réalisée en un rien de temps.

signifie que les styles au-dessus des différents classements afficheront l'effet en fonction de la situation réelle.

Modularisation

Nous pouvons extraire du code commun dans un fichier js séparé en tant que module. Les modules ne peuvent exposer les interfaces au monde extérieur que via module.exports ou exports.

En termes simples, il est indépendant de lui-même. Le scope n'agit que sur ce module et ne s'affecte pas avec js.

Code principal

partie du module

<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>

vue

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

Supplément :

Quelques différences entre vue et l'applet WeChat

Rendu conditionnel

vue : utilisez l'instruction v-if, v-else représente le bloc else de v-if, v-else-if représente le "bloc else-if" de v-if

 <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 : Utilisez wx:if, wx:else pour représenter le bloc else de wx:if, wx:elif pour représenter le bloc "else-if" de wx:if

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

2. Afficher les éléments cachés

VUE:v-show="..."

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

3. Classe de liaison

vue : utilisez v-bind, ou abréviation Pour : lier, écrivez

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

Applet WeChat séparément de la classe d'origine :

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

4. Traitement des événements

VUE : Utilisez v-on:event pour lier des événements, ou utilisez @event pour lier des événements

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

Applet WeChat : utilisez bindtap(bind+event)， ou catchtap(catch+event) pour lier des événements

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

5. Valeur de liaison

VUE : Lorsque vue lie dynamiquement la valeur d'une variable à un attribut d'un élément, un deux-points sera ajouté devant la variable :, par exemple : <img :src="imgSrc"/>

Applet WeChat : lors de la liaison de la valeur d'une variable à un attribut d'élément, elle sera placée entre deux accolades. Exemple : <image src="{{imgSrc}}"></image>

6. Passage des paramètres pour les événements de liaison

VUE : Lorsque vous passez des paramètres à la fonction de l'événement de liaison vue, vous pouvez écrire les paramètres après le fonction Entre parenthèses

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

Applet WeChat : J'ai essayé de passer uniquement le nom de la fonction aux événements de l'applet WeChat Quant à la valeur de la fonction, elle peut être liée à l'élément et obtenue dans la fonction.

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

js :

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

7. Valeur de réglage

VUE : Définir la valeur du test peut être utilisé, this.test = true; get La valeur de test peut être utilisée this.test.

Applet WeChat : pour définir la valeur de test, utilisez this.setData({test:true}); pour obtenir la valeur de test, utilisez this.data. test

Je pense que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez faire attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

Comment appeler des bibliothèques tierces dans Angular

Comment utiliser ng-animate et ng -cookies en utilisation angulaire

au sein du projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!