vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法
更新時(shí)間：2018年09月29日 10:18:01 作者：瀟I灑
今天小編就為大家分享一篇vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在我們做前端頁面的時(shí)候，為了美觀和直觀，我們希望通過條件判斷來讓頁面顯示不同的樣式，如下圖所示：
當(dāng)值為“是”時(shí)，顯示綠色的標(biāo)簽，當(dāng)值為“否”時(shí)，顯示為灰色的標(biāo)簽。
標(biāo)簽的樣式分別為：
<el-tag type="success">綠色標(biāo)簽</el-tag> <el-tag type="info">灰色標(biāo)簽</el-tag>
關(guān)鍵在于type的樣式部分，我們利用vue的樣式綁定，結(jié)合三元表達(dá)式使用
:type="{條件} ? {如果為真} : {否則}"
在代碼中：
<el-tag size="medium" :type="scope.row.is_multiple === '否' ? 'info' : 'success'" >{{
scope.row.is_multiple }}
</el-tag>
這樣效果即可出來了。
以上這篇vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue + better-scroll 實(shí)現(xiàn)移動(dòng)端字母索引導(dǎo)航功能
better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場景需求的插件。這篇文章主要介紹了Vue + better-scroll 實(shí)現(xiàn)移動(dòng)端字母索引導(dǎo)航功能,需要的朋友可以參考下2018-05-05
el-menu動(dòng)態(tài)加載路由的實(shí)現(xiàn)
本文主要介紹了el-menu動(dòng)態(tài)加載路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了通過vue刷新左側(cè)菜單欄操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
放大鏡效果在很多購物網(wǎng)站都可以看到，本文主要介紹了vue3實(shí)現(xiàn)淘寶放大鏡效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實(shí)例，可以使用組件的所有方法，?在使用方法的時(shí)候直接this.$refs.（ref值）.方法（） 就可以使用了，這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue.js搭建移動(dòng)端購物車界面，重點(diǎn)介紹基本結(jié)構(gòu)和數(shù)據(jù)渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue+element下日期組件momentjs轉(zhuǎn)換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報(bào)錯(cuò)問題，需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
element-ui upload組件上傳文件類型限制問題小結(jié)
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧2024-02-02