iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
1
Modern Web

Vue.js 30天系列 第 6

Vue.js 06 - 樣板(template) 常用功能

樣式套用

  • 綁定 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。


上一篇
Vue.js 05 - 資料綁定(data binding) 與 樣板(template) 語法
下一篇
Vue.js 07 - 樣板(template) 常用功能 - 列表
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言