vue使用三元表达式设置style，class

前言

前端开发中，面对复杂的布局，有时会需要用到三元表达式，来设置布局样式。

实现

一、设置style，使用 :style="{ '样式名' : '样式值' }" 来设置，必须是字符串形式。

<template>
  <text :style="{'background': isWhite ? 'white':'#00ff00'}">三元表达式设置style</text>
  <text :style="{'width': l_width, 'height': l_height}">三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        l_width:'100rpx',
        l_height:'100rpx',    
      }
    }
  }
</script>

二、设置class，

1、数组形式

<template>
  <text :class="['item', itemStatus==0?'active':'']" >三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, // 0:高亮显示,即设置active
      }
    }
  }
</script>

<style>
.item{width：100%; height:100rpx;}
</style>

注意：数组中的item必须加引号。若不加引号，代表的时data中的一项对象，并不是类名；将item加上引号就可以变成类名。

2、字符串拼接，两个字符串之间必须要有空格。

<template>
  <text :class="'status'+(itemStatus==0?' active':'')" >三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, // 0:高亮显示,即设置active
      }
    }
  }
</script>

<style>
.status0{color:red,font-size:30rpx}
.status1{color:blue,font-size:30rpx}
.status2{color:green,font-size:30rpx}
</style>

注意：active前面要加一个空格（空格个必须有）。

3、绑定对象【推荐】，通常给class绑定对象，这样就可以动态切换样式。

• 数组形式：[样式1，样式2]
• 对象形式：{判断条件}。

<template>
  <text :class="[itemStatus==0?'status0':'status1']" >三元表达式设置style</text>
  <text :class="{active: isActive}" >三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, 
        isActive:false, // false / true
        status0:{'color':'red','font-size':'30rpx'}
        status1:{'color':'blue','font-size':'30rpx'}
      }
    }
  }
</script>

4、数据标记

<template>
  <text class="red" v-show="title">三元表达式设置style</text>
  <text class="red" v-if="title">三元表达式设置style</text>
</template>

<script>
  export default {
    data() {
      return {
        title:'absdefg',
      }
    }
  }
</script>

<style>
.red{color:red,font-size:30rpx}
</style>