1. 程式人生 > >Vue的十個常用指令

Vue的十個常用指令

節點 bin 屬性 叠代 表單 處理 array 十個 和數

1.v-text:用於更新標簽包含的文本,作用和{{}}的效果一樣。

2.v-html:綁定一些包含html代碼的數據在視圖上。

3.v-show:用來控制元素的display屬性,和顯示隱藏有關。v-show指令的取值為true/false,當值為true時直接渲染,當值為false時渲染出來之後帶有display:none屬性。

4.v-if:控制元素是否被渲染出來。v-if指令的取值為true/false,當值為true時直接渲染,當值為false時直接不渲染。和v-show的區別為:如果需要頻繁的切換顯示/隱藏的,就用

  v-show,如果運行後不太可能切換顯示/隱藏的,就用v-if。

5.v-else:沒有對應的值,但是要求前一個兄弟節點必須要使用v-if指令。v-if和v-else只有一個被渲染出來。

6.v-for:實現列表的渲染,可以用於data中存放的是array形式的數據之類。v-for除了可以叠代數組,還可以叠代對象和整數。

7.v-bind:用於動態綁定DOM元素的屬性,常見的用法有:<a>標簽裏邊的href屬性,<img/>標簽的src屬性等。

8.v-on:相當於綁定事件的監聽器,綁定的事件觸發了,可以指定事件的處理函數。例如click事件等。

9.v-model:實現表單控件和數據的雙向綁定,是最重要最常用的指令,一般用在表單輸入。

10.v-once:特點是只渲染一次,後面元素中的數據再更新變化,都不會重新渲染。

Vue的十個常用指令