前言

前端開發(fā)中，面對復(fù)雜的布局，有時會需要用到三元表達(dá)式，來設(shè)置布局樣式。

實(shí)現(xiàn)

一、設(shè)置style，使用 :style="{ '樣式名' : '樣式值'?}" 來設(shè)置，必須是字符串形式。

<template>
  <text :style="{'background': isWhite ? 'white':'#00ff00'}">三元表達(dá)式設(shè)置style</text>
  <text :style="{'width': l_width, 'height': l_height}">三元表達(dá)式設(shè)置style</text>
</template>

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

二、設(shè)置class，

1、數(shù)組形式

<template>
  <text :class="['item', itemStatus==0?'active':'']" >三元表達(dá)式設(shè)置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, // 0:高亮顯示,即設(shè)置active
      }
    }
  }
</script>

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

注意：數(shù)組中的item必須加引號。若不加引號，代表的時data中的一項(xiàng)對象，并不是類名；將item加上引號就可以變成類名。

2、字符串拼接，兩個字符串之間必須要有空格。

<template>
  <text :class="'status'+(itemStatus==0?' active':'')" >三元表達(dá)式設(shè)置style</text>
</template>

<script>
  export default {
    data() {
      return {
        itemStatus:0, // 0:高亮顯示,即設(shè)置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綁定對象，這樣就可以動態(tài)切換樣式。

• 數(shù)組形式：[樣式1，樣式2]
• 對象形式：{判斷條件}。

<template>
  <text :class="[itemStatus==0?'status0':'status1']" >三元表達(dá)式設(shè)置style</text>
  <text :class="{active: isActive}" >三元表達(dá)式設(shè)置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、數(shù)據(jù)標(biāo)記文章來源地址http://www.zghlxwxcb.cn/news/detail-680328.html

<template>
  <text class="red" v-show="title">三元表達(dá)式設(shè)置style</text>
  <text class="red" v-if="title">三元表達(dá)式設(shè)置style</text>
</template>

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

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

到了這里，關(guān)于vue使用三元表達(dá)式設(shè)置style，class的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！