一、条件渲染

1.1 v-if、 v-else-if、 v-else

与 JavaScript 的条件语句 if、 else、 else if类似， v-if 指令用于条件性地渲染一块DOM。这块DOM只会在指令的表达式返回布尔逻辑值true的时候被渲染。

<div id="app">
    <p v-if="status ===1 ">How</p>
    <p v-else-if="status===2">Why</p>
    <p v-else>What</p>      
</div>

var vm = new Vue({
    el:"#app",
    data:{
        status:1
    }
});

从条件渲染的结构来看，v-else-if 要在v-if之后, 而v-else 要在v-else-if或 v-if之后，当表达式的值为true时 ， 当前DOM元素或组件及所有子节点元素将被渲染，当表达式的值为false时被剔除。

v-else

可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.1">
    现在你行
</div>
<div v-else>
    你不行
</div>

v-else 元素必须紧跟在带v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div id="app"> 
  <div v-if="type === 'A'">
      优秀
  </div>
  <div v-else-if="type === 'B'">
      良好
  </div>
  <div v-else-if="type === 'C'">
      中等
  </div>
  <div v-else-if="type === 'D'">
      及格
  </div>
  <div v-else>
      不及格
  </div>
</div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

在 <template> 元素上使用条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果一次切换多个元素，此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用条件指令。最终的渲染结果将不包含 <template> 元素。

<div id="app">
    <template v-if="type==='name'">
        <p>How are you </p>
        <p>Good Afternoon</p>
    </template>
    <template v-else>
        <p> Who are you</p>
        <p>I am a student</p>
    </template>
    <!--
    此处的@click是v-on:click的语法糖
    -->
    <button @click = "handleToggleClick">切换显示内容</button>
</div>

var vm = new Vue({
    el:"#app",
    data:{
        type:'age',
    },
    methods:{
        handleToggleClick:function(){
            this.type = this.type==='name'?'age':'name';
        }
    }
});

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换，会尽可能地复用已有的元素而非重新渲染：

<div id="app">
    <template v-if="loginType === 'username'">
        <label>用户名</label>
        <input placeholder="请输入用户名" key="username-input">
    </template>
    <template v-else>
        <label>电子邮件</label>
        <input placeholder="请输入电子邮箱" key="email-input">
    </template>
    <button @click = "handleToggleClick">切换登录类型</button>
</div>

var vm = new Vue({
    el:"#app",
    data:{
        loginType:'username',
    },
    methods:{
        handleToggleClick:function(){
            this.loginType = this.loginType==='username'?'email':'username';
        }
    }
});

Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可。每次切换时，输入框都将被重新渲染。<label> 元素仍然会被高效地复用，因为它们没有添加 key属性。

v-show

v-show 指令是另一个用于根据条件展示元素的选项。v-show的用法与v-if的用法基本一致，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。当v-show 表达式的值为false时， 元素就会被隐藏，查看 DOM 结构会看到元素上加载了内联样式 style="display: none;"。

<div id="app">
    <p v-show="status===1">
        爱校码
    </p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        status:2
    }
});

v-if 与 v-show 比较

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• v-show 不支持 <template> 元素，也不支持 v-else。

总之，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

二、列表渲染

2.1 基本用法

用 v-for 指令把一个数组对应为一组元素：

可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令表达式需结合 in来使用，需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<div id="app">
    <ul>
        <li v-for="(student,index) in students">
            {{parentMessage}} {{index}} {{ student.sname }} {{ student.gender }} {{student.age }} {{ student.tele }}
        </li>
    </ul>   
</div>

var vm =   new Vue({
    el:'#app',
    data:{
        parentMessage: '学生',
        students:[
            {
                sname: '川建国',
                gender: '男',
                age: 70,
                tele: '18900000001'
            },
            {
                sname: '蓬佩奥',
                gender: '女',
                age: 50,
                tele: '18933556677'
            },
            {
                sname: '佩洛西',
                gender: '男',
                age: 50,
                tele: '18922222223'
            },
            {
                sname: '朱古力',
                gender: '女',
                age: 18,
                tele: '18933333333'
            }
        ]
    }
});

在 v-for 块中，还可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。分隔符 in 前的语句使用括号。

v-for也可 以用在 内置标签<template>上， 将多个元素进行渲染 :

<div id="app">
    <ul>
        <template v-for="(student,index) in students" >
            <li>{{parentMessage}}： {{index}}</li>
            <li>{{parentName}}： {{student.sname}} </li>
            <li>{{parentGender}}： {{student.gender}}</li>
            <li>{{parentAge}}： {{student.age }}</li>
            <li>{{parentTel}}： {{student.tele }}</li>
            <hr />
        </template>
    </ul>   
</div>

var vm =   new Vue({
    el:'#app',
    data:{
        parentMessage: '学生',
        parentName:'姓名',
        parentGender:'性别',
        parentAge:'年龄',
        parentTel:'电话',
        students:[
            {
                sname: '川建国',
                gender: '男',
                age: 70,
                tele: '18900000001'
            },
            {
                sname: '蓬佩奥',
                gender: '女',
                age: 50,
                tele: '18933556677'
            },
            {
                sname: '佩洛西',
                gender: '男',
                age: 50,
                tele: '18922222223'
            },
            {
                sname: '朱古力',
                gender: '女',
                age: 18,
                tele: '18933333333'
            }
        ]
    }
});

也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

在 v-for 里使用对象：

也可以用v-for 来遍历一个对象的属性。

<ul id="v-for-object" class="demo">
  <li v-for="value in student">
    {{ value }}
  </li>
</ul>
var vm =   new Vue({
    el:'#v-for-object',
    data:{
        student:{
            name: '川建国',
            gender: '男',
            age: 70,
            tel: '18900000001'
        }
    }
});

也可以提供第二个的参数为对象属性名称 (也就是键名)，还可以用第三个参数作为索引：

<ul id="v-for-object" class="demo">
    <li v-for="(value, name, index) in student">
        {{ index }}. {{ name }}: {{ value }}
    </li>
</ul>

使用v-for迭代整数 :

<div id="app">
    <span v-for="n in 100"> {{ n }}  </span>
</div>
var vm = new Vue({
    el:'#app'
});

维护状态：

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key属性：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供key 属性，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

2.2 数组更新检测

变更方法：

数据与视图的双向绑定是Vue 的核心，修改数组时， Vue 会检测到数据变化，Vue 将被侦听的数组的变更方法进行了包裹，它们也将会触发视图更新。这些被包裹的方法包括：

• push() -- 可向数组中添加新元素，新元素将添加在数组的末尾，并改变数组的长度；
• pop() -- 删除数组的最后一个元素，此方法改变数组的长度；
• shift() -- 把数组的第一个元素从其中删除，此方法改变数组的长度；
• unshift() -- 可向数组的开头添加一个或更多元素，并返回新的长度；
• splice() -- 用于添加或删除数组中的元素，该方法会改变原始数组；
• sort() -- 用于对数组的元素进行排序，排序顺序可以是字母或数字，并按升序或降序；
• reverse() -- 用于颠倒数组中元素的顺序。

可以打开Console控制台，然后对前面例子的 students 数组调用变更方法:

> vm.students.push({          //向数组students中添加新元素
        sname: '特朗普',
        gender: '男',
        age: 70,
        tele: '18944444444'
  });
< 5                           //返回数组长度

替换数组：

使用变更方法，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，这些方法不会改变原数组：

• filter() -- 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
• concat() -- 用于连接两个或多个数组，该方法不会改变原始数组，而仅仅会返回被连接数组的一个副本。
• slice() -- 从已有的数组中返回选定的元素，不会改变原始数组。

使用以上方法，它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

同样打开Console控制台，然后对前面例子的 students 数组调用非变更方法:

> vm.students = vm.students.filter(function(student){
     return student.sname.match('佩');
  });

可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原始数组是非常高效的操作。 Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用 DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。

2.3 显示过滤 / 排序后的结果

想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

<div id="app">
    <ul>
        <template v-for="(student,index) in sortedStudents" >
            <li>{{parentMessage}}： {{index+1}}</li>
            <li>{{parentName}}： {{student.sname}} </li>
            <li>{{parentGender}}： {{student.gender}}</li>
            <li>{{parentAge}}： {{student.age }}</li>
            <li>{{parentTel}}： {{student.tele }}</li>
            <hr />
        </template>
    </ul>   
</div>

var vm =   new Vue({
    el:'#app',
    data:{
        parentMessage: '学生',
        parentName:'姓名',
        parentGender:'性别',
        parentAge:'年龄',
        parentTel:'电话',
        students:[
            {
                sname: '川建国',
                gender: '男',
                age: 70,
                tele: '18900000001'
            },
            {
                sname: '蓬佩奥',
                gender: '女',
                age: 30,
                tele: '18933556677'
            },
            {
                sname: '佩洛西',
                gender: '男',
                age: 50,
                tele: '18922222223'
            },
            {
                sname: '朱古力',
                gender: '女',
                age: 18,
                tele: '18933333333'
            }
        ]
    },
    computed:{
        filterStudents:function(){
            return this.students.filter(function(student){
                return student.sname.match('佩');
            });
        },
        sortedStudents: function(){
            return this.students.sort(function(a,b){
                return a.age - b.age;
            });
        }
    }
});

三、事件处理

3.1 事件处理方法

可以用 v-on 指令在HTML上监听 DOM 事件，并在事件触发时执行事件处理方法。

<div id="app">
    <!-- @click 为v-on:click的缩写 -->
    <p><button @click="handleAdd()">加 1</button></p>
    <p><button @click="handleAdd(10)">加 10</button></p>
    <p>上面的 {{btn}} 按钮已被点击{{times}}次。</p>
</div>

var vm = new Vue({
      el:'#app',
      data:{
        counter1:0,
        counter10:0,
        btn:''
      },
      methods:{
        handleAdd: function(count){
            count =count || 1;
            this.btn = '加' + count
            if (this.btn =='加1'){
                this.counter1 += 1;
            }else if(this.btn =='加10'){
                this.counter10 += 1;
            }
        }
      },
      computed:{
        times: function(){
            if (this.btn =='加1'){
                return this.counter1
            }else if(this.btn =='加10'){
                return this.counter10
            }
        }
      }
});

有时需要在事件处理方法中访问原始的 DOM 事件。可以用Vue提供的一个特殊变量 $event， 将其传入方法：

<button v-on:click="warn('表单尚未提交。', $event)">
    提交
</button>

// ...
methods: {
    warn: function (message, event) {
        // 现在我们可以访问原生事件对象
       if (event) {
           event.preventDefault()
       }
       alert(message)
    }
}

3.2 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。类似event.preventDefault()也可以用 Vue 事件的修饰符来实现，为此，Vue.js 为 v-on 指令提供了事件修饰符。修饰符是由圆点开头的指令后缀来表示的。Vue支持以下修饰符:

• .stop -- 用于阻止单击事件继续传播或者冒泡；
• .prevent -- 用于提交事件不再重载页面；
• .capture -- 用于添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理；
• .self -- 用于只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的；
• .once -- 用于只触发一次的事件，组件同样适用；
• .passive -- 用于滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成，这其中包含 event.preventDefault() 的情况。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略。

具体用法如下:

<a @click.stop="doThis"></a>

<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<div @click.capture="doThis">...</div>

<div @click.self="doThat">...</div>

<a @click.once="doThis"></a>

<!-- 这个 .passive 修饰符尤其能够提升移动端的性能 -->
<div @scroll.passive="onScroll">...</div>

3.3 按键修饰符

在监听键盘事件时，经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 'key' 是'Enter' 时调用 'vm.submit()' -->
<input @keyup.enter="submit">

<!-- 处理函数只会在 '$event.key' 等于 'PageDown' 时被调用 -->
<input @keyup.page-down="onPageDown">

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。但使用 keyCode 属性是被允许的。为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

3.4 系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• .ctrl
• .alt
• .shift
• .meta

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

用法如下:

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

注意：修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 alt 的情况下释放其它按键，才能触发 keyup.alt。而单单释放 alt 也不会触发事件。

.exact 修饰符：

.exact 修饰符允许控制由精确的系统修饰符组合触发的事件。用法如下：

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">点我</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">点你</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">点它</button>

鼠标按钮修饰符：

鼠标按钮修饰符会限制处理函数仅响应特定的鼠标按钮。

• .left
• .right
• .middle

3.5 使用 v-on 在 HTML 中监听事件的优点

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法；
2. 因为无须在 JavaScript 里手动绑定事件，ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试；
3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。无须担心如何清理它们。

四、表单输入绑定

4.1 基本用法

可以用 v-model 指令在表单 <input>、<textarea> 及 <select>的DOM元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• input元素的text类型 和 textarea 元素使用 value 属性和 input 事件；
• input元素的checkbox类型 和 radio类型 使用 checked 属性和 change 事件；
• select 元素将 value作为 属性 并将 change 作为事件。

单行文本:

在输入框上输入的内容会实时映射到绑定的数据上。

<div id="app">
    <input type="text" v-model="message" placeholder="输入内容">
    <p>展示信息: {{ message }}</p>        
</div>

var vm = new Vue({
    el:"#app",
    data:{
        message:''
    }   
});

在输入框输入的同时，{{ message }} 也会实时将内容渲染在视图中。

多行文本：

对于 textarea 元素多行文本域的用法：

<div id="app">
    <span>多行信息显示:</span>
    <p style="white-space: pre-line;">{{ text }}</p>
    <br>
    <textarea v-model="text" placeholder="添加多行信息"></textarea>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        text: ''
    }
});

使用 v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的 value属性，对于在<textarea>{{text}}</textarea> 之间插入的值，也不会生效，应用 v-model 来代替。

复选框：

• 单个复选框

使用 v-model绑定到布尔值：

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">选择状态: {{ checked }}</label>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        checked: false
    }
});

在勾选时，数据 checked 的值变为 true，label中渲染的内容同时更新。

• 多个复选框

使用 v-model绑定到同一个数组：

<div id='app'>
    <input type="checkbox" id="trump" value="特朗普" v-model="checkedNames">
    <label for="trump">特朗普</label>
    <input type="checkbox" id="pompeo" value="蓬佩奥" v-model="checkedNames">
    <label for="pompeo">蓬佩奥</label>
    <input type="checkbox" id="pelosi" value="佩洛西" v-model="checkedNames">
    <label for="pelosi">佩洛西</label>
    <br>
    <span>选择的名字： {{ checkedNames }}</span>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        checkedNames: []
    }
});

使用时， v-model与 value一起，多个复选框都绑定到同一个数组类型的数据， value的值在数组当中，就会选中该项。这一过程是双向的，在勾选时， value 的值会自动 push 到数组中。

单选按钮：

<div id="app">
    <input type="radio" id="one" value="壹" v-model="picked">
    <label for="one">壹</label>
    <br>
    <input type="radio" id="two" value="贰" v-model="picked">
    <label for="two">贰</label>
    <br>
    <span>选项: {{ picked }}</span>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        picked: ''
    }
});

选择框：

• 单选时

只能有一个选项被选中：

<div id="app">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>特朗普</option>
        <option>蓬佩奥</option>
        <option>佩洛西</option>
    </select>
    <span>已选项: {{ selected }}</span>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        selected: ''
    }
});

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

• 多选时

绑定到一个数组：

<div id="app">
    <select v-model="selected" multiple style="width: 50px;">
        <option>科顿</option>
        <option>库斯托夫</option>
        <option>博尔顿</option>
        <option>赫尔姆斯</option>
    </select>
    <br>
    <span>已选项: {{ selected }}</span>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        selected: []
    }
});

用 v-for 渲染的动态选项：

<div id="app">
    <select v-model="selected">
        <option v-for="option in options" :value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>已选项: {{ selected }}</span>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        selected: 'Cotton',
        options: [{
                text: '科顿',
                value: 'Cotton'
            },
            {
                text: '库斯托夫',
                value: 'Kostov'
            },
            {
                text: '博尔顿',
                value: 'Bolton'
            },
            {
                text: '赫尔姆斯',
                value: 'Helms'
            }
        ]
    }
});

4.2 值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "川建国" -->
<input type="radio" v-model="picked" value="川建国">

<!-- ‘toggle’ 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "trump" -->
<select v-model="selected">
    <option value="trump">特朗普</option>
</select>

但是有时需要把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

• 单选按钮：

当选中时，v-model的值等于v-bind的绑定的值。

<div id="app">
    <!-- :value 等效于v-bind:value -->
    <input type="radio" v-model="pick" :value="abc">
    <label>单选按钮 </label>
    <p>{{pick}}</p>
    <p>{{abc}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        pick: false,
        abc: 55
    }
});

// 当选中时，都等于55
vm.pick === vm.abc

• 复选框

当选中时，v-model的值取true-value属性的绑定值；当没有选中时，取 false-value属性的绑定值。

<div id="app">
    <input type="checkbox" v-model="toggle"
      :true-value="yes" :false-value="no">
    <label>复选框 </label>
    <p>{{toggle}}</p>
    <p>{{yes}}</p>
    <p>{{no}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        toggle: false,
        yes: '特朗普',
        no:'蓬佩奥'
    }
});

这里的 true-value 和false-value的属性并不会影响输入控件的 value 属性，因为浏览器在提交表单时并不会包含未被选中的复选框。

• 选择框的选项

当选中选择框的选项时，v-model的值取选项option绑定值v-bind:value。

<div id="app">
    <select v-model="selected">
        <!-- 内联对象字面量 -->
        <option :value="{ number: 55 }"> 55 </option>
    </select>
    <label>选择框 </label>
    <p>{{selected.number}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        selected: ''
    }
});

// 当选中时，切换到Console:
> typeof vm.selected         // => 'object' 
< "object"
> vm.selected.number         // => 55
< 55

当选中时， vm.selected 是一个对象，即 vm.selected.number为55。

4.3 修饰符

v-model 也有修饰符，用于控制数据同步的时机。

• .lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

<div id="app">
    <!-- 在“change”时而非“input”时更新 -->
    <input type="text" v-model.lazy="msg">
    <label>延迟修饰符 </label>
    <p>{{msg}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        msg: ''
    }
});

• .number

在输入框中默认输入值的类型为 String字符串类型，如果想自动将用户的输入值转为Number数值类型，可以给 v-model 添加 number 修饰符：

<div id="app">
    <input type="number" v-model.number="age">
    <label>数值修饰符 </label>
    <p>{{ typeof age}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        age: ''
    }
});

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

• .trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<div id="app">
    <input type="text" v-model.trim="msg">
    <label>去空格修饰符 </label>
    <p>{{ msg }}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        msg: ''
    }
});