vue的常用指令

vue指令

下面將介紹Vue中常用的幾個內置指令。當然,Vue除了內置指令,也可以根據需求自定義指令。

v-if指令

條件判斷指令,根據表達式值的真假來插入或刪除元素,表達式返回一個布爾值,語法如下:

v-if = "expression"

v-show指令

條件渲染指令,與v-if不同的是,無論v-show的值爲true或false,元素都會存在於HTML代碼中;而只有當v-if的值爲true,元素纔會存在於HTML代碼中。v-show指令只是設置了元素CSS的style值。語法如下:

v-show = "expression"

注意:v-if和v-show經常拿來對比
v-else指令

可配合v-if或v-show使用,v-else指令必須緊鄰v-if或v-show,否則該命令無法正常工作。v-else綁定的元素能否渲染在HTML中,取決於前面使用的是v-if還是v-show。若前面使用的是v-if,且v-if值爲true,則v-else元素不會渲染;若前面使用的是v-show,且v-show值爲true,則v-else元素仍會渲染到HTML。
v-else不常用

v-for指令

循環指令,基於一個數組渲染一個列表,與JavaScript遍歷類似,語法如下:

v-for = "item in items"

v-bind指令

給DOM綁定元素屬性,語法如下:

v-bind:argument="expression"

v-on指令

用於監聽DOM事件,語法與v-bind類似,如監聽點擊事件v-on:click=”doSth”。

注:v-on指令可以縮寫爲@符號。如:@click=”doSth”。

v-model指令
vue的v-model是一個十分強大的指令,它可以自動讓原生表單組件的值自動和你選擇的值綁定,

輸入框的值和一個數據是綁定的,輸入框的值變化,和他綁定的值也會發生變化

這裏寫圖片描述

參考:Vue.js常用指令彙總(v-if、v-for等):http://www.jb51.net/article/96422.htm
http://blog.csdn.net/yangbingbinga/article/details/61914312

發佈了179 篇原創文章 · 獲贊 82 · 訪問量 55萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章