亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中動(dòng)態(tài)添加class類名的方法

 更新時(shí)間：2018年09月05日 09:36:25   作者：garyHoH  
今天小編就為大家分享一篇vue中動(dòng)態(tài)添加class類名的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue 動(dòng)態(tài)添加class類名，靈活得讓你發(fā)狂，下面示例幾個(gè)

<template>
  <div>
    <h2>動(dòng)態(tài)添加類名</h2>


    <!-- 第一種方式:對(duì)象的形式 -->
    <!-- 第一個(gè)參數(shù) 類名， 第二個(gè)參數(shù)：boolean值 -->
    <!-- 對(duì)象的形式: 用花括號(hào)包裹起來(lái)，類名用引號(hào)， -->
    <!-- 優(yōu)點(diǎn): 以對(duì)象的形式可以寫(xiě)多個(gè)，用逗號(hào)分開(kāi) -->
    <p :class="{'p1' : true}">對(duì)象的形式(文字的顏色)</p>
    <p :class="{'p1' : false, 'p': true}">對(duì)象的形式(文字的顏色)</p>


    <!-- 第二種方式:三元表達(dá)式 注意點(diǎn)：放在數(shù)組中，類名要用引號(hào)-->
    <p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的顏色)</p>


    <!-- 第三種方式: 數(shù)組的形式 -->
    <p :class="[isTrue, isFalse]">數(shù)組的形式(文字的顏色)</p>

    <!-- 數(shù)組中用對(duì)象 -->
    <p :class="[{'p1': false}, isFalse]">數(shù)組中使用對(duì)象(文字的顏色)</p>


 <!--補(bǔ)充: class中還可以傳方法，在方法中返回類名-->
 <p :class="setClass">通過(guò)方法設(shè)置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中動(dòng)態(tài)添加class類名的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論