小程序 动态绑定class

微信小程序提供了比较便捷的语法，使我们能够快速地动态绑定class

用法：

在一个标签的class里添加{{}}模板语法，模板里面是一个三元判别式，其中表达式一般引用data中的属性，表达式返回true或者false，A，B是class名，按照三元判别式的逻辑引用A或B。

PS：

• 当然可以同时引用多个，如这行代码引用了类E，F，选择引用A或B，选择引用C或D
• 也可以把三元判别式最后的参数去掉，以达到某个样式的显示或隐藏，如

一个简单的例子：

index.wxml

border类给按钮添加了蓝色边框，根据data中的属性isRed，选择按钮的背景色

微信小程序动态绑定样式测试按钮

index.js

isRed属性设置成true

//index.js
//获取应用实例
const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),isRed: true},
})

index.wxss

/**index.wxss**/
.border {border: 10rpx solid blue;margin-top: 50rpx;
}.red {background-color: red;
}.green {background-color: green;
}

最终效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！