vue.js 常用指令攻略
Vue.js的指令是以v-開首的，它們感化于HTML元素，指令供給了一些特別的特征，將指令綁心猿意馬在元素上時，指令會為綁心猿意馬的方針元素添加一些特別的行為，我們可以將指令看作特別的HTML特征（attribute）。
東西/原料
- vue.js
- 代碼編纂器
- 瀏覽器
方式/步調
- 1
v-if指令
v-if是前提襯著指令，它按照表達式的真假來刪除和插入元素，它的根基語法如下：
v-if="expression"
expression是一個返回bool值的表達式，表達式可所以一個bool屬性，也可所以一個返回bool的運算式。例如：
- 2
v-show指令
v-show也是前提襯著指令，和v-if指令分歧的是，利用v-show指令的元素始終會被襯著到HTML，它只是簡單地為元素設置CSS的style屬性。
- 3
v-else指令
可以用v-else指令為v-if或v-show添加一個“else塊”。v-else元素必需當即跟在v-if或v-show元素的后面——不然它不克不及被識別。
- 4
v-for指令
v-for指令基于一個數組襯著一個列表，它和JavaScript的遍歷語法相似：
v-for="item in items"
items是一個數組，item是當前被遍歷的數組元素。
- 5
v-bind指令
v-bind指令可以在其名稱后面帶一個參數，中心放一個冒號離隔，這個參數凡是是HTML元素的特征（attribute），例如：v-bind:class
v-bind:argument="expression"
下面這段代碼構建了一個簡單的分頁條，v-bind指令感化于元素的class特征上。這個指令包含一個表達式，表達式的寄義是：高亮當前頁。
- 6
v-on指令
v-on指令用于給監聽DOM事務，它的用語法和v-bind是近似的，例如監聽<a>元素的點擊事務：
<a v-on:click="doSomething">
有兩種形式挪用方式：綁心猿意馬一個方式（讓事務指標的目的方式的引用），或者利用內聯語句。Greet按鈕將它的單擊事務直接綁心猿意馬到greet()方式，而Hi按鈕則是挪用say()方式。
注重事項
- v-bind和v-on可以別離縮寫為 ：和 @
- 發表于 2018-08-23 00:00
- 閱讀 ( 1199 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章