class与style绑定

绑定HTML Class

类似vue的class绑定

例子:

  1. <template>
  2. <view wx:class="{{ {active: isActive} }}">
  3. 这是一段测试文字
  4. </view>
  5. </template>
  6. <script>
  7. import {createComponent} from '@mpxjs/core'
  8. createComponent({
  9. properties: {
  10. isActive: Boolean
  11. }
  12. })
  13. </script>
  14. <style lang="stylus">
  15. .active
  16. background-color blue
  17. </style>

当该组件接受一个参数isActive为true时,就会为view加上class:active。

注意:由于微信的限制,wx:class 中的 key 值不能使用引号(如: { ‘my-class-name’: xx })。

绑定内联样式

例子:

  1. <template>
  2. <view wx:for="{{list}}" wx:style="{{item.style}}">{{item.name}}</view>
  3. </template>
  4. <script>
  5. import {createComponent} from '@mpxjs/core'
  6. createComponent({
  7. data:{
  8. list:[
  9. {
  10. name: 'red',
  11. style: {
  12. color: 'red'
  13. }
  14. },
  15. {
  16. name: 'blue',
  17. style: {
  18. color: 'blue'
  19. }
  20. }
  21. ]
  22. }
  23. })
  24. </script>