样式语法

class属性

如果使用class语法，支持如下写法

  2. <template lang="vue">
  3. <view class="page-container">
  4.   <view><text :class="true? 'bg-green':''" class="font" >fafafa</text></view>
  5.   <view><text class="bg-green font" >fafafa</text></view>
  6. </view>
  7. </template>

简单数据绑定

  1. <template>
  2.   <view>
  3.     <text :class="prefix+'a'">class数据绑定</text>
  4.   </view>
  5. </template>
  6. <script>
  7. class Index {
  8.   data() {
  9.     return {
  10.       prefix: 'cls'
  11.     }
  12.   }
  13. }
  14. export default new Index();
  15. </script>

三元运算符

  1. <view  class="static" class="open ? 'cls1 cls2' : 'cls3 cls4'">
  2. </view>

或者将其放入计算属性

  1. <template>
  2.   <view class="itemClass">
  3.   </view>
  4. </template>
  5. <script>
  6. class Index {
  7.   computed = {
  8.     itemClass() {
  9.       return open ? 'cls1 cls2' : 'cls3 cls4';
  10.     }
  11.   }
  12. }
  13. export default new Index();
  14. </script>

style语法

如果使用style语法支持如下写法，style不支持多个style,即style :style同时写

  1. <view>
  2.   <text style="background-color:red">fafafa</text></view>
  3.   <view><text :style="computedString">fafafa</text>
  4. </view>
  5. <script>
  6. class Index {
  7.   data = {
  8.     inlineStyle: 'border: 1px solid red;'
  9.   }
  10.   computed = {
  11.     computedString() {
  12.       return this.$cmlStyle(inlineStyle)
  13.     }
  14.   }
  15. }
  16. export default new Index();
  17. </script>