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

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

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

方法一

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=='通用名稱(chēng)'">
 <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>

方法二

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

<v-list dense>
 <template v-for="(col,i) in cols">
 <v-list-item :key="i" v-if="col.text=='商品碼'||col.text=='通用名稱(chēng)'">
 <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)庫(kù)以及報(bào)錯(cuò)解決

下載阿里的字體圖標(biāo)庫(kù)文件，放在\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)等是否漏寫(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• Vue.js常用指令匯總（v-if、v-for等）
• 對(duì)vue中v-if的常見(jiàn)使用方法詳解
• 詳解為什么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-cli 3.x配置跨域代理的實(shí)現(xiàn)方法

  這篇文章主要介紹了vue-cli 3.x配置跨域代理的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  2019-04-04
• 

  elementui上傳文件不允許重名的解決方案

  用戶(hù)可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無(wú)重名的文件,如果有會(huì)返回重名文件的名稱(chēng)數(shù)組,這些文件需要一個(gè)一個(gè)的向用戶(hù)確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下

  2024-02-02
• 

  vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并

  今天小編就為大家分享一篇vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

  2019-11-11
• 

  vue和webpack打包項(xiàng)目相對(duì)路徑修改的方法

  這篇文章主要介紹了vue和webpack打包項(xiàng)目相對(duì)路徑修改的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

  2018-06-06
• 

  vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)

  這篇文章主要介紹了vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

  2020-07-07
• 

  vue?底部footer導(dǎo)航組件問(wèn)題

  這篇文章主要介紹了vue?底部footer導(dǎo)航組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

  2022-04-04
• 

  vue?history模式刷新404原因及解決方法

  vue路由的URL有兩種模式,一種是?hash,一種是history,下面這篇文章主要給大家介紹了關(guān)于vue?history模式刷新404原因及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

  2022-09-09
• 

  vue實(shí)現(xiàn)樹(shù)形表格

  這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹(shù)形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2021-09-09
• 

  在vue中使用echarts的方法以及可能遇到的問(wèn)題

  Echarts是一個(gè)與框架無(wú)關(guān)的JS圖表庫(kù),但是它基于Js,這樣很多框架都能使用它,下面這篇文章主要給大家介紹了關(guān)于在vue中使用echarts的方法以及可能遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下

  2022-09-09
• 

  vue在組件中使用v-model的場(chǎng)景

  這篇文章主要介紹了vue在組件中使用v-model的場(chǎng)景，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

  2022-07-07

最新評(píng)論