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à)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
在我們做前端頁(yè)面的時(shí)候，為了美觀和直觀，我們希望通過條件判斷來(lái)讓頁(yè)面顯示不同的樣式，如下圖所示：
當(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>
這樣效果即可出來(lái)了。
以上這篇vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解vuejs幾種不同組件（頁(yè)面）間傳值的方式，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解
今天小編就為大家分享一篇對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)
這篇文章主要介紹了vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價(jià)值，感興趣的可以了解一下2021-06-06
最近找到幾個(gè)好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中$router和$route的區(qū)別，對(duì)vue感興趣的同學(xué)，一定要看下2021-05-05
vue使用element-ui實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue使用element-ui實(shí)現(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Element-ui/Element-plus?Vue報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Element-ui/Element-plus?Vue報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Ant Design Pro 菜單自定義 icon，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11
Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-04-04