vuejs常用指令

vuejs常用指令

什麼是指令呢？上面我們用到的v-model就是一個指令

Vue。js的指令是以v-開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令繫結在元素上時，指令會為繫結的目標元素新增一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。

Vue。js提供了一些常用的內建指令，接下來我們將介紹以下幾個內建指令：

v-if指令

v-show指令

v-else指令

v-for指令

v-bind指令

v-on指令

v-if指令

v-if是條件渲染指令，它根據表示式的真假來刪除和插入元素

基本語法：

v-if=“expression”

expression是一個返回布林值的表示式，表示式可以是一個布林屬性，也可以是一個返回布林的運算式。

男士

=20”>age：{{age}}

var vm = new Vue（{ el： ‘#app’， data： { age：25， isMale：true， } }）

v-show指令

v-show和v-if區別。

v-show不管條件是否成立，都會渲染html，而v-if只有條件成立才會渲染

先看兩個截圖，第一個是當isMale為true時，第二張圖是isMale為false條件不成立時，可以看到v-if的html並沒有渲染出來，

而使用v-show的div僅僅是更改了它的樣式display： none；

男士v-if

男士v-show

var vm = new Vue（{ el： ‘#app’， data： { isMale：false } }）

v-else指令

v-else指令與v-if或者v-show同時使用，v-if條件不成立則會顯示v-else內容

男士

女士

var vm = new Vue（{ el： ‘#app’， data： { isMale：true } }）

v-for指令

v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似

v-for=“item in list”

list是一個數組，item是當前遍歷的陣列元素

v-for=“（item，index） in list”其中index是當前迴圈的索引，下標從0開始

序號	姓名	年齡

var vm = new Vue（{ el： ‘#app’， data： { list：［{ name：‘章三’， age：18 }，{ name：‘李四’， age：23 }］ } }）

v-bind指令

v-bind動態地繫結一個或多個特性，可以在其名稱後面帶一個引數，中間放一個冒號隔開，這個引數通常是HTML元素的特性（attribute），如v-bind： class

class可以和v-bind：class同時存在，也就是說有class了，再新增v-bind：class並不會覆蓋原來的樣式類，而是在原來基礎上新增新的類名

var vm = new Vue（{ el： ‘#app’， data： { img：‘https：//www。baidu。com/img/bd_logo1。png’， isLogo：false， hasBorder：true } }）

以上v-bind：src也可簡寫成：src，修改上面程式碼

v-on指令

v-on用於監聽DOM事件，用法和v-bind類似，例如給button新增點選事件

別眨眼網