How to dynamically bind class names in WeChat mini programs

This time I will show you how to dynamically bind class names in WeChat mini programs, and what are the precautions for how to dynamically bind class names in WeChat mini programs. The following is a practical case, let's take a look.

I encountered such a problem during the development of the mini program...

When the ranking list was developed, the top three styles were different, and the rest were the same. But they were all traversed through the same element, and it got stuck. Later, I discovered the concept of module modularity, so I checked the API and made it in no time.

means that the styles above different rankings will display the effect according to the actual situation.

Modularization

We can extract some common code into a separate js file as a module. Modules can only expose interfaces to the outside world through module.exports or exports.

The popular general is that it is independent of itself. The scope only affects the module and does not affect each other with js.

Main code

module part

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

view

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

Supplement:

Some differences between vue and WeChat applet

##1. Conditional rendering

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

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

2. Display hidden elements

VUE:v-show="..."

hidden="{{...}}"

3. Binding class

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

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

4. Event processing

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

bindtap(bind event), or catchtap(catch event)Binding event

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

5. Binding value

VUE: When passing parameters to the function of vue binding event, you can write the parameters in the parentheses after the function

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

WeChat applet: I have tried that I can only pass the function name for the events of the WeChat applet. Function value can be bound to an element and obtained in the function

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

js:

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

7. Set valueVUE: You can use it to set the value of test,

; you can use it to get the value of test. this.test. WeChat applet: Settings To get the value of test, use

To get the value of test, use this.data.testI believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!

Recommended reading:

within the project

The above is the detailed content of How to dynamically bind class names in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!