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">