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

vue : Use the v-if instruction, v-else represents the else block of v-if, v-else-if represents the "else-if block" of 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: use wx:if, wx:else represents the else block of wx:if, wx:elif represents the "else-if" block of wx:if

<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="..."

WeChat applet:

hidden="{{...}}"

3. Binding class

vue: Use v- for all bind, or abbreviated as: bind, write it separately from the original class

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

WeChat applet:

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

4. Event processing

VUE : Use v-on:event to bind events, or use @event to bind events

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

WeChat applet: use

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

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

5. Binding value

VUE: When vue dynamically binds the value of a variable to an attribute of the element , a colon will be added in front of the variable:, for example:

WeChat applet: bind the value of a variable as an element attribute is enclosed in two curly brackets. Example:

##6. Binding event parameters

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,

this.test = true

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

this.setData({test:true});

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:

How to call third-party libraries in Angular

How to use Angular ng-animate and ng-cookies Use

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!