vue 動態添加class類名,靈活得讓你發狂,下面示例幾個
<template> <div> <h2>動態添加類名</h2> <!-- 第一種方式:對象的形式 --> <!-- 第一個參數 類名, 第二個參數:boolean值 --> <!-- 對象的形式: 用花括號包裹起來,類名用引號, --> <!-- 優點: 以對象的形式可以寫多個,用逗號分開 --> <p :class="{'p1' : true}">對象的形式(文字的顏色)</p> <p :class="{'p1' : false, 'p': true}">對象的形式(文字的顏色)</p> <!-- 第二種方式:三元表達式 注意點:放在數組中,類名要用引號--> <p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的顏色)</p> <!-- 第三種方式: 數組的形式 --> <p :class="[isTrue, isFalse]">數組的形式(文字的顏色)</p> <!-- 數組中用對象 --> <p :class="[{'p1': false}, isFalse]">數組中使用對象(文字的顏色)</p> <!--補充: class中還可以傳方法,在方法中返回類名--> <p :class="setClass">通過方法設置class類名</p> </div></template>
<script> export default { data () { return { isTrue: 'p1', isFalse: 'p' }; }, method: { setclass () { return 'p1'; } } }</script>
<style scoped> .p1 { color: red; font-size: 30px; } .p { color: blue }</style>
以上這篇vue中動態添加class類名的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答