Vue中動態樣式綁定的經典用法舉例( :style以及 :class)

需求：在當前企業名片主題 (EnterpriseTheme) 爲 'qinglianxiyu' 時，該組件所佔位置的 margin-top 爲'0'；其他情況爲'260px'。

1.用:style的方式

HTML部分：

<!-- 注意此處的屬性名，需用駝峯式而不能用連接符式 -->
<div :style="{marginTop: theMarginTop}"
     class="view-btn">
</div>

JS部分：

computed: {
  theMarginTop () {
    // 此處的 enterpriseTheme 由 props 中傳遞過來的
    return this.enterpriseTheme === 'qinglianxiyu' ? '0' : '260px'
  }
}

 

2.用:class的方式

HTML部分：

<div :class="{ 'no-margin-top': enterpriseTheme === 'qinglian
     class="view-btn">
</div>

CSS部分：

// 此處"margin-top: 260px;"直接寫在 class="view-btn" 中
.no-margin-top {
   margin-top: 0;
}

（附： 添加多個類名的情況  參考文章：https://blog.csdn.net/qq940853667/article/details/77413323（vue中動態添加class類名））

<!-- 第一種方式:對象的形式 -->
<div :class="{'first-class' : isFirstClass, 'second-class': !isFirstClass}">對象的形式</div>
<!-- 第二種方式:三元表達式 注意點：放在數組中，類名要用引號-->
<div :class="[ isFirstClass ? 'first-class' : 'second-class' ]">三元表示式</div>
<!-- 第三種方式: 數組的形式 -->
<div :class="[firstClassName, secondClassName]">數組的形式</div>