VUE权威指南-第三章 指令
3.1 内部指令
1：v-if
完全根据表达式的值在DOM中生成或者移除一个元素；如果初始条件为假，则什么都不做，只有在条件第一次为真时才开始进行局部编译（编译会被缓存起来）；如果想切换多个元素，可以使用 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 元素。
<template v-if="ok">
<h1>Titleh1>
<p>Paragraph 1p>
<p>Paragraph 2p>
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>Usernamelabel>
<input placeholder="Enter your username">
template>
<template v-else>
<label>Emaillabel>
<input placeholder="Enter your email address">
template>如果不想复用他们。可以用key实现
<template v-if="loginType === 'username'">
<label>Usernamelabel>
<input placeholder="Enter your username" key='username-input'>
template>
<template v-else>
<label>Emaillabel>
<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">Jacklabel>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">Johnlabel>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mikelabel>
<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">Onelabel>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Twolabel>
<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>Aoption>
<option>Boption>
<option>Coption>
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>Aoption>
<option>Boption>
<option>Coption>
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事件中发生；
type="text" v-model.lazy='text' name="" value="123">（2）如果想自动将用户输入的值转化为number类型（如果原值转化结果为NaN,则返回原值），可以添加一个修饰符number(type-number时，也返回字符串类型，因此很有必要添加)
type="number" v-model.number='text' name="" value="123">（3）如果想自动过滤首尾空格，则可以添加trim修饰符；
<input v-model.trim="msg">