目录 一、条件渲染 1.1、v-if 1.1.1、template v-if 1.1.2、v-else 1.1.3、v-else-if 1.1.4、用 key 管理可复用的元素 1.1.5、v-show 1.2、v-if vs. v-show 二、列表渲染 2.1、v-for 基本用法 2.1.1、Template v-for 2.1.2、对象迭代 v-for 2.1.3、整数迭代 v-for 2.1.4、组件 和 v-for 2.2、key 2.3、数组更新检测 2.3.1、变异方法 2.3.2、重塑数组 2.3.3、触发数组状态更新 2.4、对象更改检测注意事项 2.5、显示过滤/排序结果 三、事件处理器 3.1、监听事件 3.2、方法事件处理器 3.3、内联处理器方法 3.4、事件修饰符 3.5、按键修饰符 3.6、为什么在 HTML 中监听事件? 四、ES2015新增数组方法 4.1、indexOf()找到的元素位置 4.2、filter()过滤 4.3、forEach()迭代 4.4、map()映射 4.5、reduce()累加器 五、示例下载 六、视频 一、条件渲染 1.1、v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： {{#if ok}}

Yes

{{/if}} 在 Vue.js ，我们使用 v-if 指令实现同样的功能：

Yes

也可以用 v-else 添加一个 “else” 块：

Yes

No

1.1.1、template v-if 因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个