溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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';
如果已經安裝了插件，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條件判斷改變元素樣式的方法有哪些大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
