VUE 에서 V-IF 조건 판단 변경 요소 의 스타일 조작

방법 1
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>

방법 2
클래스 선택 기 를 통 해 스타일 변경

<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 도입 iconformant 아 리 글꼴 아이콘 라 이브 러 리 및 오류 해결
아 리 의 글꼴 아이콘 라 이브 러 리 파일 을 다운로드 하여\src\assets\font 폴 더 아래 에 놓 습 니 다.
style-loader,css-loader,file-loader(또는 url-loader)를 설치 하고 기억 하 십시오--save-dev
웹 팩 의 프로필 에 추가:

{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(ttf|eot|woff|woff2|svg)$/,
use:['file-loader']
}

입구 파일 main.js 도입
import './assets/font/iconfont.css';
플러그 인 이 설치 되 어 있 으 면 웹 팩 설정 파일 에 도 추가 되 었 습 니까?아니면 다음 과 같은 오 류 를 보고 하 시 겠 습 니까?

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 */

쉼표,괄호 등 웹 팩 설정 파일 에 오류 가 있 는 지 확인 하 는 것 을 권장 합 니 다.
그리고 프로젝트 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 조건 판단 변경 요소 의 스타일 조작 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 에 게 참고 가 될 수 있 고 많은 사랑 을 바 랍 니 다.