class與style繫結

<div v-bind:class="{active: isActive}">
    
</div>

data(){
	return{
	isActive: true
}
}

繫結內聯樣式：

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

條件渲染

v-if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 truthy 值的時候被渲染。

<div v-if="awesome">
    leve is awesome 
</div>

使用template作為不可見元素包裹多個需要條件渲染的區塊。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

v-show決定隱藏還是顯示一個元素，但是元素始終會被渲染且保留在DOM中，v-show類似css中的visible屬性，v-if為false時類似於disable:false。

注意，v-show 不支援 <template> 元素，也不支援 v-else。

<h1 v-show="ok">Hello!</h1>

不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS property display。一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。