微信小程序中如何动态绑定类名(小程序动态绑定类)

这次给大家带来的是如何在微信小程序中动态绑定类名，以及如何在微信小程序中动态绑定类名有哪些注意事项。以下是实际案例。让我们来看看。

小程序开发中遇到这样的问题& # 8230；

排行榜开发时，前三名风格不同，其余风格相同。但是都是穿越同一个元素，当时就卡住了。后来发现了模块模块化的概念，就查了api，一下子就做出来了。

即不同排名上面的风格根据实际情况显示效果。

模块化

我们可以将一些常用代码提取到一个单独的js文件中作为一个模块。该模块只能通过module.exports或exports公开接口。

Popular会独立于自身，范围只作用于这个模块，不影响js。

主代码

模块部分

& ltwxs module = & quot排名& quot& gtvar index of = function(index){ switch(index){ case 0:return & # 039；first -价格& # 039；；打破；案例一:退货& # 039；second -价格& # 039；；打破；案例二:退货& # 039；third -价格& # 039；；打破；} };module . exports . style = index of；& lt/wxs & gt；视角

& ltview class = & quotweui -badge { { rank . style(index)} } & quot；& gt{ { index+1 } } & lt；/view & gt；补充:

vue和微信小程序的一些区别

I .有条件渲染

Vue:使用v-if指令，v-else表示v-if的else块，v-else-if表示v-if的“else-if块”

& ltp v-if = & quot；type = = = & # 039一& # 039；"& gtA & lt/p & gt；& ltp v-else -if = & quot；type = = = & # 039B& # 039；"& gtB& lt；/p & gt；& ltp v-else -if = & quot；type = = = & # 039C & # 039"& gtC & lt/p & gt；& ltp v-else & gt；不是A/B/C & lt；/p & gt；微信小程序:对wx:if的else块使用wx:if，wx:else，对wx:if使用wx:elif“else -if & quot；块

& ltview wx:if = & quot；{ {长度& gt5 } } & quot& gt1 & lt/view & gt；& ltview wx:elif = & quot；{ {长度& gt2 } } & quot& gt2 & lt/view & gt；& lt查看wx:else & gt；3 & lt/view & gt；二。显示隐藏元素

VUE:v-show = & quot；..."微信小程序:hidden = & quot{{...} } & quot

三。绑定类

Vue:全部使用v-bind，或者缩写为:bind，与现有类分开编写。

& ltp class = & quot测试& quotv-bind:class = & quot；{ active:is active } & quot；& gt& lt/p & gt；微信小程序:

& ltview class = & quot测试{{isActive？'主动& # 039；:''} } & quot& gt& lt/view & gt；四。事件处理

VUE:使用v-on:event绑定事件，或者使用@event绑定事件。

& lt按钮v-on:click = & quot；计数器+= 1 & quot；& gt添加1 & lt/button & gt；& lt按钮v-on:click . stop = & quot；计数器+= 1 & quot；& gtAdd1 & lt/button & gt；//微信小程序防止事件冒泡:使用bindtap(绑定+事件)或catchtap(捕捉+事件)绑定事件。

& ltbutton bindtap = & quot点击我& quot& gt单击我</button & gt；& lt按钮catchtap = & quot点击我& quot& gt单击我</button & gt；//防止事件冒泡v .绑定值

VUE:vue动态绑定一个值为元素属性的变量时，会在变量前面加一个冒号:例如:< img:src = & quot；imgSrc & quot/& gt；

微信小程序:变量的值作为元素属性绑定时，会用两个大括号括起来。示例:< image src = & quot{ { imgSrc } } & quot& gt& lt/image & gt；

不及物动词绑定事件参数

Vue:Vue绑定事件的函数传递参数时，可以把参数写在函数后面的括号里。

& ltp @ click = & quotchange tab(1)& quot；& gt哈哈。微信小程序:我尝试了只为微信小程序的事件传递函数名。至于函数值，可以绑定到元素，在函数中获取。

& lt查看数据-tab = & quot；1 & quotcatchtap = & quotchangeTab & quot& gt哈哈</view & gt；js:

change tab(e){ var _ tab = e . current target . dataset . tab；}七。设置值

VUE:可以使用设置值test，this.test = true您可以使用this.test来获取test的值。

微信小程序:用this.setData设置test的值({ test:true })；用this.data.test获取test的值

相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

如何在Angular中调用第三方库

Angular ng-animate和ng-cookies如何在项目中使用？