基础四、 条件渲染，列表渲染，事件处理
在上节中详细介绍了计算属性、侦听器和Class 与 Style 绑定，本节继续来看条件渲染，列表渲染，事件处理。
一、条件渲染
v-if与v-show的差别，v-if根据条件来控件dom是否渲染到界面上，v-show不管是否满足条件，先把dom渲染到界面上，然后再根据条件控制是否显示。v-show 不支持 <template> 元素，也不支持 v-else。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级，不推荐同时使用。
二、列表渲染
用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
1 <ul id="array-rendering"> 2 <li v-for="item in items"> 3 {{ item.message }} 4 </li> 5 </ul>
同时也支持当前项的索引，v-for="(item, index) in items"，也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。也可以用 v-for 来遍历一个对象的 property。
1 <li v-for="(value, name) in myObject"> 2 {{ name }}: {{ value }} 3 </li>
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
-
push()pop()shift()unshift()splice()sort()reverse()
这些方法都是直接修改数组的，比如这样修改数据 example1.items.push({ message: 'Baz' })，DOM将会触发更新。也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
1 example1.items = example1.items.filter(item => item.message.match(/Foo/))
这种操作DOM并不会重新渲染，Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数，这种操作挺骚的。最近输入结果是：12345678910
1 <div id="range" class="demo"> 2 <span v-for="n in 10" :key="n">{{ n }} </span> 3 </div>
如果v-for 与 v-if同时使用，当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量，这时会编译会报错：
1 <li v-for="todo in todos" v-if="!todo.isComplete"> 2 {{ todo.name }} 3 </li>
三、事件处理
使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"。
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
1 <button @click="warn('Form cannot be submitted yet.', $event)"> 2 Submit 3 </button>
事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：
1 <!-- 这两个 one() 和 two() 将执行按钮点击事件 --> 2 <button @click="one($event), two($event)"> 3 Submit 4 </button>
Vue.js 为 v-on 提供了以下事件修饰符：
1 <!-- 阻止单击事件继续传播 --> 2 <a @click.stop="doThis"></a> 3 4 <!-- 提交事件不再重载页面 --> 5 <form @submit.prevent="onSubmit"></form> 6 7 <!-- 修饰符可以串联 --> 8 <a @click.stop.prevent="doThat"></a> 9 10 <!-- 只有修饰符 --> 11 <form @submit.prevent></form> 12 13 <!-- 添加事件监听器时使用事件捕获模式 --> 14 <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> 15 <div @click.capture="doThis">...</div> 16 17 <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> 18 <!-- 即事件不是从内部元素触发的 --> 19 <div @click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
同时vue也提供了以下按键修饰符：
1 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> 2 <input @keyup.enter="submit" />
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
