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

瀏覽：116日期：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. HTML實(shí)現(xiàn)title 屬性換行小技巧2. ASP.NET MVC實(shí)現(xiàn)單個(gè)圖片上傳、限制圖片格式與大小并在服務(wù)端裁剪圖片3. Python CSS選擇器爬取京東網(wǎng)商品信息過(guò)程解析4. JAVA實(shí)現(xiàn)PDF轉(zhuǎn)HTML文檔的示例代碼5. js中textContent、innerText和innerHTML的用法以及區(qū)別6. python 利用 PIL 將數(shù)組值轉(zhuǎn)成圖片的實(shí)現(xiàn)7. Python3 assert斷言實(shí)現(xiàn)原理解析8. Java 獲取 jar包以外的資源操作9. python基于tkinter制作無(wú)損音樂(lè)下載工具(附源碼)10. python中的裝飾器該如何使用