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

瀏覽：155日期：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)等是否漏寫。

然后重新運(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. IntelliJ IDEA安裝插件的方法步驟2. php模擬實(shí)現(xiàn)斗地主發(fā)牌3. 理解PHP5中static和const關(guān)鍵字4. MyBatis中的JdbcType映射使用詳解5. vue 使用localstorage實(shí)現(xiàn)面包屑的操作6. Vuex localStorage的具體使用7. Python random庫(kù)使用方法及異常處理方案8. spring acegi security 1.0.0 發(fā)布9. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)