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類名的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。