樣式套用

• 綁定 Class

基本寫法以 JSON 傳入，當對應的數值為 true 時套用，false 時移除該類別

<button class="btn"
	     :class="{ 'active': isActive, 'hover': isHover }">按我</button>

<!-- 當 isActive: true, isHover: false 時 -->
<!-- 等效 <button class="btn active"> -->

如果你是固定寫 True/False

<button class="btn"
	     :class="{ 'btn-primary': true, 'hover': false }">按我</button>

就不要耍帥了，簡單一點

<button class="btn btn-primary">按我</button>

當你的 class 並非固定時，可改用 Array 傳入

<button :class="[ 'btn', 'btn-'+btnType ]"
	     @click="toggle">{{ btnType }}</button>
<!-- 按鈕每按一次，更換按鈕樣式 -->
<!--
<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
-->

{
	data: {
		btnType: 'default'
	},
	methods: {
		toggle: fucntion() {
			return ( this.btnType === 'default' ) ? 'primary' : 'default';
		}
	}
}

若是你想給樣式套用條件給個語意化的名字，拿 Vue 屬性包裝

<button :class="btnOptions">按我</button>

data

{
	data: {
		btnOptions: { 'active': isActive, 'hover': isHover }
	}
}

computed

{
	data: {
		btnType: 'default'
	},
	computed: {
		btnOptions: function() {
			return ['btn-' + this.btnType];
		}
	},
}

method

<button :class="btnOptions()">按我</button>

{
	data: {
		btnType: 'default'
	},
	methods: {
		btnOptions: function() {
			return ['btn-' + this.btnType];
		}
	},
}

是不是比較好懂呢？

• 綁定 inline-style
  跟 class 雷同，能取到的 Vue屬性 都能當作傳入參數，就不贅述了。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

條件顯示

UI流程常有特定情況才出現/隱藏 DOM 或 Component 的需求，Vue 對應寫法是

• v-if / v-show
• v-else
• v-else-if

<h1 v-if="isBoy">男</h1>
<h1 v-else>女</h1>

<h1 v-show="isBoy">男</h1>
<h1 v-show="!isBoy">女</h1>

我們相信社會能夠包容的，Vue 也可以

<h1 v-if="isBoy">男</h1>
<h1 v-else-if="isGirl">女</h1>
<h1 v-else>無性別</h1>

v-show 和 v-if 看起來都在處理顯示與否，幹嘛生兩個雙胞胎？
天生我材必有用，兩個效果些微不同。

v-if 切換時，真的會新增或移除 DOM，
v-show 僅是套用樣式，false 時套用 display: none (應該很熟悉)

因此，若你的效能是卡在初始化時，
建議用 v-if，用不到的 DOM 盡可能初始值設為 false。

又或者你的畫面是切換才卡，建議改用 v-show。