2.基本使用

2.1插值表達式：{{}}

{{插值表達式}}

1.支持data區域數據的顯示。例如：{{message}}

2.支持表達式的計算。例如：{{1+2+3}} 、 {{‘Hello’ + ’ World’}}

3.支持函數的調用。例如：{{‘Hello’.split(’’)}}

2.2標簽體操作：v-text&v-html

2.3循環語句: v-for

2.4屬性綁定–普通屬性： v-bind:xxx

2.5屬性綁定–class屬性: v-bind:class

• 案例：隔行換色

  

  

2.6屬性綁定–style屬性: v-bind:style

2.7控制語句: v-show & v-if

2.8表單數據綁定: v-model

通過 v-model 可以完成數據雙向綁定.

• 數據data區域 綁定 視圖區域, 如果data數據區域的數據發生改變, 自動更新表單標簽的顯示

• 視圖區域 綁定 數據data區域 , 如果表單標簽的數據發生改變,自動更新data區域存放的數據.

  

  

  

• 案例：數據綁定–對象