VUE中V-IF條件判斷改變元素的樣式操作
更新時間：2020年08月09日 09:10:16 作者：i_belive_my_love
這篇文章主要介紹了VUE中V-IF條件判斷改變元素的樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨想過來看看吧
方法一
v-if判斷后用標簽改變樣式（特定顯示列字體加粗）
<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>
}
效果
補充知識：vue引入iconfont阿里字體圖標庫以及報錯解決
下載阿里的字體圖標庫文件，放在\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配置文件里面也添加，還是報以下錯誤：
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 */
建議檢查仔細webpack配置文件是否有錯誤，比如逗號，括號等是否漏寫。
然后重新運行項目npm run dev。
如果還是報錯，試試將iconfont.css文件中的路徑修改下，然后重新運行項目。
@font-face {font-family: "iconfont";
src: url('./iconfont.eot?t=1529419541319'); /* IE9*/
src: url('./iconfont.eot?t=1529419541319#iefix')
以上這篇VUE中V-IF條件判斷改變元素的樣式操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue.js初學(xué)入門教程,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
使用vue引入maptalks地圖及聚合效果的實現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue傳值的編碼和解碼方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue鍵盤事件點擊事件加native操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時候，我們一般引入多個js或者其他文件，一般使用? require.context 來引入多個不同的文件，但是vite中是不支持 require的，他推出了一個功能用import.meta.glob來引入多個，單個的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
vue輪播組件實現(xiàn)$children和$parent 附帶好用的gif錄制工具
這篇文章主要介紹了vue輪播組件實現(xiàn)，$children和$parent，附帶好用的gif錄制工具,需要的朋友可以參考下2019-09-09
Vue使用Element實現(xiàn)增刪改查+打包的步驟
這篇文章主要介紹了Vue使用Element實現(xiàn)增刪改查+打包的步驟，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue3中的執(zhí)行流程思路分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue單頁緩存方案分析及實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了詳解Vue中添加過渡效果 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03