样式语法

class属性

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

<template lang="vue">
<view class="page-container">
  <view><text :class="true? 'bg-green':''" class="font" >fafafa</text></view>
  <view><text class="bg-green font" >fafafa</text></view>
</view>
</template>

简单数据绑定

<template>
  <view>
    <text :class="prefix+'a'">class数据绑定</text>
  </view>
</template>
<script>
class Index {
  data() {
    return {
      prefix: 'cls'
    }
  }
}
export default new Index();
</script>

三元运算符

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

或者将其放入计算属性

<template>
  <view class="itemClass">
  </view>
</template>
<script>
class Index {
  computed = {
    itemClass() {
      return open ? 'cls1 cls2' : 'cls3 cls4';
    }
  }
}
export default new Index();
</script>

style语法

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

<view>
  <text style="background-color:red">fafafa</text></view>
  <view><text :style="computedString">fafafa</text>
</view>
<script>
class Index {
  data = {
    inlineStyle: 'border: 1px solid red;'
  }
  computed = {
    computedString() {
      return inlineStyle;
    }
  }
}
export default new Index();
</script>