<style>
.red {color:red}
</style>
大体的意思是这样
有6个。
v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；所以，v-if指令只渲染他身后表达式为true的元素；在这里引入v-show指令，因为二者的区别是v-show指令会渲染他身后表达式为false的元素，这样的元素上会添加css代码：style="display:none"将上面v-if的实例代码改为v-show
v-show 与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
v-else 必须跟在v-if/v-show指令之后，不然不起作用；如果v-if/v-show指令的表达式为true，则else元素不显示；如果v-if/v-show指令的表达式为false，则else元素显示在页面上；
v-for 类似JS的遍历，用法为 v-for="item in items", items是数组，item为数组中的数组元素。
v-bind 这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式。
v-on 用于监听指定元素的DOM事件，比如点击事件。
在 Vue.js ，使用 v-if 指令判断元素显示<h1 v-if="ok">Yes</h1>
<!-- 当ok为true时，该元素显示，否则不显示-->
在 <template>中配合 v-if 条件渲染一整组
因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，此时可以把一个 <template>元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 <template>元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
