VUE中V-IF條件判斷改變?cè)氐臉邮讲僮?/h1>

瀏覽：91日期：2022-12-12 13:27:38

方法一

v-if判斷后用標(biāo)簽改變樣式（特定顯示列字體加粗）

<v-list dense> <template v-for='(col,i) in cols'> <v-list-item :key='i' v-if='col.text==’商品碼’||col.text==’通用名稱’'> <v-list-item-content><b>{{col.text}}</b></v-list-item-content> <v-list-item-content class='align-end mystyle'><b>{{item[col[’value’]]}}</b> </v-list-item-content> </v-list-item> <v-list-item :key='i' v-else> <v-list-item-content>{{col.text}}</v-list-item-content> <v-list-item-content >{{item[col[’value’]]}} </v-list-item-content> </v-list-item> </template></v-list>

方法二

通過(guò)類選擇器改變樣式

<v-list dense> <template v-for='(col,i) in cols'> <v-list-item :key='i' v-if='col.text==’商品碼’||col.text==’通用名稱’'> <v-list-item-content class='myfont'>{{col.text}}</v-list-item-content> <v-list-item-content class='align-end mystyle myfont'>{{item[col[’value’]]}} </v-list-item-content> </v-list-item> <v-list-item :key='i' v-else> <v-list-item-content>{{col.text}}</v-list-item-content> <v-list-item-content >{{item[col[’value’]]}} </v-list-item-content> </v-list-item> </template></v-list><style> .myfont{ font-weight:bold; }</style> }

效果

補(bǔ)充知識(shí)：vue引入iconfont阿里字體圖標(biāo)庫(kù)以及報(bào)錯(cuò)解決

下載阿里的字體圖標(biāo)庫(kù)文件，放在srcassetsfont文件夾下面。

安裝style-loader,css-loader和file-loader (或url-loader) ,記得--save-dev

webpack的配置文件中添加：

{test: /.css$/,use:[’style-loader’,’css-loader’]},{test:/.(ttf|eot|woff|woff2|svg)$/,use:[’file-loader’]}

入口文件main.js引入

import ’./assets/font/iconfont.css’;

如果已經(jīng)安裝了插件，webpack配置文件里面也添加，還是報(bào)以下錯(cuò)誤：

Unexpected character ’@’ (2:0)You may need an appropriate loader to handle this file type.@font-face {font-family: 'iconfont';src: url(’iconfont.eot?t=1529419541319’); /* IE9*/src: url(’iconfont.eot?t=1529419541319#iefix’) format(’embedded-opentype’), /* IE6-IE8 */

建議檢查仔細(xì)webpack配置文件是否有錯(cuò)誤，比如逗號(hào)，括號(hào)等是否漏寫(xiě)。

然后重新運(yùn)行項(xiàng)目npm run dev。

如果還是報(bào)錯(cuò)，試試將iconfont.css文件中的路徑修改下，然后重新運(yùn)行項(xiàng)目。

@font-face {font-family: 'iconfont';src: url(’./iconfont.eot?t=1529419541319’); /* IE9*/src: url(’./iconfont.eot?t=1529419541319#iefix’)

以上這篇VUE中V-IF條件判斷改變?cè)氐臉邮讲僮骶褪切【幏窒斫o大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽： Vue

上一條：在vue中使用console.log無(wú)效的解決下一條：Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作

相關(guān)文章：

1. 解決Android Studio 格式化 Format代碼快捷鍵問(wèn)題2. php解決注冊(cè)并發(fā)問(wèn)題并提高QPS3. JavaEE SpringMyBatis是什么? 它和Hibernate的區(qū)別及如何配置MyBatis4. Java使用Tesseract-Ocr識(shí)別數(shù)字5. Springboot 全局日期格式化處理的實(shí)現(xiàn)6. Python使用urlretrieve實(shí)現(xiàn)直接遠(yuǎn)程下載圖片的示例代碼7. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)8. JavaScript實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)驗(yàn)證碼的實(shí)現(xiàn)示例9. vue實(shí)現(xiàn)web在線聊天功能10. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題