<!-- 只有在 `keyCode` 是 5 时调用 `vm.submit()` --> <input v-on:keyup.5="submit"> <!-- 为重要的 keyCode 如 enter 提供别名--> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
此外还有系统修饰符监听键盘事件，不同的系统其键盘/系统修饰符不一样。这些按键修饰符可以任意组合使用。
v-if、v-show 条件渲染
条件渲染 v-if 根据表达式的值的真假条件渲染元素，在表达式为真时渲染，为假时移除。
<p v-if="status === 1">当 status 为 1 时显示此行</p> <p v-else-if="status === 1">当 status 为 2 时显示此行</p> <p v-else>其它情况默认显示此行</p>
v-show 也是条件渲染，但只切换元素的 CSS 属性 display，无论条件真假都会被编译，相比于 v-if 更适用于频繁切换场景。
<p v-show="status === 1">当 status 为 1 时显示此行</p>
当 data: {status: 2} 时隐藏，但依旧会被编译，渲染结果为：
<p>当 status 为 1 时显示此行</p>
显然在 Vue.js 内置的 <template> 元素上可以使用 v-if，但不能使用 v-show，可以思考下为什么。
v-for 列表渲染
列表渲染指令 v-for 常用于数组遍历或枚举一个对象的循环显示，必须结合 in 使用特定语法 alias in expression 为当前遍历的元素提供别名：
<!-- 遍历一个数组 --> <div v-for="item in items">{{ item.text }}</div> <!-- 提供第二个的参数为数组的索引 --> <div v-for="(item, index) in items">{{ index }} - {{ item.text }}</div> <!-- 遍历对象属性 --> <div v-for="value in object">{{ value }}</div> <!-- 提供第二个可选的参数：对象的键名 --> <div v-for="(value, key) in object">{{ key }}: {{ value }}</div> <!-- 提供第三个的可选参数：对象的索引 --> <div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}</div>
可以用 of 替代 in 作为分隔符
当 v-for 和 v-if 在同一节点一起使用时，v-for 的优先级比 v-if 更高。
v-model 表单控件双向绑定
v-model 其实也是一个特殊的语法糖，其实实现的数据双向绑定也可用v-bind和v-on实现，但v-model在不同表单上会有更加智能的处理。
文本框
经典的使用案例是对<input>、<textarea>文本框的双向数据绑定：
<!-- 输入框 --> <input type="text" v-model="message" placeholder="edit me"> <!-- 文本域 --> <textarea v-model="message" placeholder="edit me"></textarea> <!-- 实时更新 --> <p>Message is: {{ message }}</p>
动态选择
对于单选按钮，复选框及选择框的选项，v-model配合 Vue 实例的数据作为value属性值实现不同效果，即会忽略所有表单元素的 value、checked、selected 特性的值。
<!--单选按钮的互斥效果--> <div> <input type="radio" value="One" v-model="picked"> <label for="one">One</label> <input type="radio" value="Two" v-model="picked"> <label for="two">Two</label> <!-- picked 显示的是 value 的值 --> <p>Picked: {{ picked }}</p> </div> <!--多选按钮--> <div> <input type="checkbox" value="One" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" value="Two" v-model="checkedNames"> <label for="john">John</label> <!-- Checked 显示的是 value 组成的数组 --> <p>Checked: {{ checkedNames }}</p> </div>
修饰符
v-model的修饰符的使用限制在<input>、<select>、<textarea> 和组件。
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤
v-pre、v-cloak、v-once
这三个指令的共同点是无需表达式，用法如下：
<!-- 不显示未编译的标签直到实例初始化完 --> <div v-cloak>{{ message }}</div> <!-- 需要配合 CSS 隐藏样式 [v-cloak]{ display: none;}--> <!-- 只渲染一次，随后的渲染将被视为静态内容并跳过 --> <div v-once>{{ message }}</div> <!-- 不会被编译，直接显示显示原始{{ }}标签 --> <div v-pre>{{ message }}</div>