class与style绑定
绑定HTML Class
类似vue的class绑定
例子:
<template>
<view wx:class="{{ {active: isActive} }}">
这是一段测试文字
</view>
</template>
<script>
import {createComponent} from '@mpxjs/core'
createComponent({
properties: {
isActive: Boolean
}
})
</script>
<style lang="stylus">
.active
background-color blue
</style>
当该组件接受一个参数isActive为true时,就会为view加上class:active。
注意:由于微信的限制,wx:class 中的 key 值不能使用引号(如: { ‘my-class-name’: xx })。
绑定内联样式
例子:
<template>
<view wx:for="{{list}}" wx:style="{{item.style}}">{{item.name}}</view>
</template>
<script>
import {createComponent} from '@mpxjs/core'
createComponent({
data:{
list:[
{
name: 'red',
style: {
color: 'red'
}
},
{
name: 'blue',
style: {
color: 'blue'
}
}
]
}
})
</script>