VUE權威指南-第三章 指令
3.1 內部指令
1:v-if
完全根據表示式的值在DOM中生成或者移除一個元素;如果初始條件為假,則什麼都不做,只有在條件第一次為真時才開始進行區域性編譯(編譯會被快取起來);如果想切換多個元素,可以使用 元素當做包裝元素,並在上面使用 v-if。最終的渲染結果不會包含 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
2:v-show
完全根據表示式的值在DOM中顯示隱藏元素;元素始終編譯並且保留,只是簡單的進行CSS切換;
3:v-else
表示 v-if 的“else 塊”;v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的後面——否則它將不會被識別。
<div v-if="Math.random() > 0.5"> //(random() 方法可返回介於 0 ~ 1 之間的一個隨機數。)
Now you see me
</div>
<div v-else>
Now you don't
</div>
VUE會盡可能高效的渲染元素,通常會複用已有元素,而不是從頭開始渲染;在下面的程式碼中切換 loginType 將不會清除使用者已經輸入的內容。因為兩個模版使用了相同的元素, 不會被替換掉——僅僅是替換了它的 placeholder。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
如果不想複用他們。可以用key實現
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key='username-input'>
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key='email-input'>
</template>
當v-for跟v-if處於同一節點, v-for 的優先順序比 v-if 更高,這意味著 v-if 將分別重複運行於每個 v-for 迴圈中。當你想為僅有的 一些 項渲染節點時,這種優先順序的機制會十分有用,
<ul>
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
</ul>
上面的程式碼只傳遞了未complete的todos。
4:v-else-if
v-else-if,顧名思義,充當 v-if 的“else-if 塊”。可以鏈式地使用多次:
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else-if="type == 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
以上全部屬於條件渲染
5:v-model
該指令在表單控制元件元素上建立雙向資料繫結;會自動忽略表單元素的value,checked,selected屬性的初始值;
(1)輸入框,文字框(同輸入框)
<input v-model="message" placeholder="edit me" value='初始值'>
<p>Message is: {{ message }}</p>
new Vue({
el: '...',
data: {
message : ‘’
}
})
data中未寫message的話,會報錯;‘初始值’並不會顯示在頁面中
(2)複選框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: [] //這裡必須是陣列,寫成‘’的話,每次點選一個,3個全部被選中
}
})
(3)單選框
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
(4)單選列表(如果v-model的值不匹配任何的選項,就以未選中狀態渲染;在ios中這會使使用者無法選擇第一個選項,因為這樣的情況下,IOS不會引發change事件,因此disabled是建議做法)
<div id="example-5">
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
(5)多選列表(multiple是H5的新屬性,如果使用該屬性,則欄位可接受多個值。windows下按住ctrl選擇多個 )
<div id="example-6">
<select v-model="selected" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
6:v-bind
想繫結 value 到 Vue 例項的一個動態屬性上,這時可以用v-bind 實現,並且這個屬性的值可以不是字串。
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
<input type="radio" v-model="pick" v-bind:value="a">
<select v-model="selected">
<option v-bind:value="{ number: 123 }">123</option>
</select>
修飾符:
(1)新增lazy屬性可以將資料改到change事件中發生;
<input type="text" v-model.lazy='text' name="" value="123">
(2)如果想自動將使用者輸入的值轉化為number型別(如果原值轉化結果為NaN,則返回原值),可以新增一個修飾符number(type-number時,也返回字串型別,因此很有必要新增)
<input type="number" v-model.number='text' name="" value="123">
(3)如果想自動過濾首尾空格,則可以新增trim修飾符;
<input v-model.trim="msg">