1. 動態屬性名：可使用表達式來設置動態屬性名或方法名：

<!-- 屬性name --><a :[name]="url"> ... </a><!-- 計算屬性sss和s --><img :[sss]="/img/test.png"/> <!-- 方法change1和change2 --><img :[change1()]="change2()"/>data: {  name: 'href',  sss: 'src'}

注意：要避免空格和引號等，且需要小寫，可使用計算屬性來應對復雜表達式，都需要使用[]

2. computed/methods/watch

computed可使用get/set

 computed: {    top() {      return 'top'    },    name: {      get () {        return this.name      },      set (val) {        this.name = val      }    }  }

computed可緩存，但不可傳參，會根據data中的屬性變化而變化，即是根據響應式依賴來變化，而Date不是響應式依賴，即不會變化；method則每次都會進行計算，但可傳參。

watch用于處理異步或開銷較大的操作，如輸入搜索時。

3. style綁定

直接對象或變量對象 計算屬性 直接style或style對象

<!-- 屬性名可加引號也可不加，屬性小駝峰 --><div :style="{ 'color': 'red', fontSize: fontSize + 'px' }">樣式3</div>

 數組結合三目/數組結合對象

data: { isActive: true, activeClass: 'active'}<!-- 使用數組時變量和字符串需要通過引號來區分 --><div :class="[isActive ? activeClass : '', 'errorClass']"></div><!-- 使用對象時類名不加引號可表示變量也可表示字符串 --><div :class="[{ active: isActive }, 'errorClass']"></div>

 4. v-if條件渲染

可使用template包裹元素，template會被當成不可見的包裹元素

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

多條件判斷

<div v-if="type === 'A'"> A</div><div v-else-if="type === 'B'"> B</div><div v-else-if="type === 'C'"> C</div><div v-else> Not A/B/C</div>

5. key

添加key防止vue重復利用不想被重復利用的元素，如下的input如果不添加key，則vue會重復使用key，進而input的value值在切換后還會被保留，因為vue僅僅替換了placeholder

<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"></template><template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"></template>

6. v-if和v-show

v-if是組件的銷毀和重建，如果初始條件為false，則什么都不做，直到變為真，所以切換開銷高，運行條件很少改變時適用