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

 更新時(shí)間：2020年08月09日 09:10:16   作者：i_belive_my_love  

這篇文章主要介紹了VUE中V-IF條件判斷改變?cè)氐臉邮讲僮?，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨想過來看看吧

方法一

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 class="align-end mystyle" >{{item[col['value']]}}
 </v-list-item-content>
 </v-list-item>
 </template>
</v-list>

方法二

通過類選擇器改變樣式

<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 class="align-end mystyle" >{{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)庫以及報(bào)錯(cuò)解決

下載阿里的字體圖標(biāo)庫文件，放在\src\assets\font文件夾下面。

安裝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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• Vue.js常用指令匯總（v-if、v-for等）
• 對(duì)vue中v-if的常見使用方法詳解
• 詳解為什么Vue中的v-if和v-for不建議一起用
• Vue.js使用v-show和v-if的注意事項(xiàng)
• vue.js使用v-if實(shí)現(xiàn)顯示與隱藏功能示例
• 對(duì)vue v-if v-else-if v-else 的簡(jiǎn)單使用詳解
• 圖文講解vue的v-if使用方法
• vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別
• vue中v-if?和v-permission?共同使用的坑及解決方案

• VUE
• V-IF
• 條件
• 判斷
• 元素

相關(guān)文章

• 

  vue.js初學(xué)入門教程（1）

  這篇文章主要為大家詳細(xì)介紹了vue.js初學(xué)入門教程,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2016-11-11
• 

  使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)

  這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

  2020-08-08
• 

  vue傳值的編碼和解碼方式

  這篇文章主要介紹了vue傳值的編碼和解碼方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

  2022-07-07
• 

  vue鍵盤事件點(diǎn)擊事件加native操作

  這篇文章主要介紹了vue鍵盤事件點(diǎn)擊事件加native操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

  2020-07-07
• 

  vue3+vite中使用import.meta.glob的操作代碼

  在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來引入多個(gè)，單個(gè)的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下

  2022-11-11
• 

  vue輪播組件實(shí)現(xiàn)$children和$parent 附帶好用的gif錄制工具

  這篇文章主要介紹了vue輪播組件實(shí)現(xiàn)，$children和$parent，附帶好用的gif錄制工具,需要的朋友可以參考下

  2019-09-09
• 

  Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟

  這篇文章主要介紹了Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下

  2020-11-11
• 

  Vue3中的執(zhí)行流程思路分析-流程圖

  這篇文章主要介紹了Vue3中的執(zhí)行流程思路分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

  2022-12-12
• 

  vue單頁緩存方案分析及實(shí)現(xiàn)

  這篇文章主要介紹了vue單頁緩存方案分析及實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

  2018-09-09
• 

  詳解Vue中添加過渡效果

  本篇文章主要介紹了詳解Vue中添加過渡效果 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

  2017-03-03

最新評(píng)論