快捷導航

vue中三元表達式方法例子

更新時間：2023年09月22日 16:33:59 作者：程序托尼

這篇文章主要給大家介紹了關(guān)于vue中三元表達式的相關(guān)資料,眾所周知三元表達式用來根據(jù)參數(shù)的不同執(zhí)行不同的代碼是很方便的,需要的朋友可以參考下

1、數(shù)組形式

<div :class='["classify",current=="0" ? "active" : ""]' @click='current=0'>

注意：數(shù)組中的classify如果不加引號的話，代表的是data中的一項，并不是類名，將classify加上雙引號，變成字符串就可以變成類名

2、字符串拼接

<div :class="'classify'+(current=='0'?' active':'')" @click='current=0'>課程</div>

注意：active前要加一個空格（必須有），字符串拼接時，兩個字符串之間要有空格

3. 綁定對象

通常給class綁定個對象，就可以動態(tài)的切換樣式了。(data中定義isActive的true、false)

<div :class="{ active: isActive }">hello</div> handleClick(){ this.isActive = !this.isActive }
<i class="iconfont " :class="[current=='0'?'class1':'class2']"></i>

推薦、不加{}就算是加字符串,最好綁定class用[]、{判斷},style用{}

<span v-bind:style="{display:isActive ? 'block':'none'}">hello</span>
<div :style="{width:width,height:height}"></div>

注意:v-bind:style="{樣式名:‘樣式值’}" 必須是字符串形式

4.數(shù)組形式

`<div :class='[“classify”,current==“0” ? “active” : “”]' @click=‘current=0'>

注意：數(shù)組中的classify如果不加引號的話，代表的是data中的一項，并不是類名，將classify加上雙引號，變成字符串就可以變成類名

5.數(shù)據(jù)標記

`<div :class='[“classify”,current==“0” ? “active” : “”]' @click=‘current=0'>

<button class="tk" v-show="(active==0 || active==1) || active==2">退款</button>

6.多個判斷值

{{item.biddingState==0?'報名中' : item.biddingState==1?'即將競投': item.biddingState==2?'正在競投':item.biddingState==3?'結(jié)束競投':'競投異常'}}

附：vue3 三元表達式不生效

關(guān)于Vue 3中三元表達式不生效的問題，可能有幾個原因?qū)е?。以下是一些常見的解決方案：

確保你的三元表達式語法正確。Vue 3中的三元表達式與Vue 2相同，格式為條件 ? 值1 : 值2。請檢查你的語法是否正確。
確保你的條件表達式返回的是一個布爾值。三元表達式的條件部分應該返回一個布爾值，而不是其他類型的值。請確保你的條件表達式能夠正確地返回布爾值。
檢查你的模板是否正確引用了變量。如果你在三元表達式中使用了變量，確保你在模板中正確地引用了這些變量。
檢查你的數(shù)據(jù)是否正確初始化。如果你的數(shù)據(jù)沒有正確初始化，可能會導致三元表達式不生效。請確保你在組件中正確初始化了相關(guān)的數(shù)據(jù)。