6-Vue指令之条件渲染 V-if/else

1.内部指令
Vue 的指令和 HTML 的原生指令相似，这指令容易记忆并且好理解，因为它仅是在原生标签前面加上了 V-前缀：

v-show          v-html
v-else          v-on
v-model         v-bind
v-repeat        v-ref
v-for           v-pre
v-text          v-clock
v-el            v-if 

1.1 v-if
v-if 接受 bool 类型，根据表达式的值在 DOM 中生成或移除一个元素
值为 true 则对应的元素的一个克隆将被重新插入 DOM 中
值为 false 则对应元素就会从 DOM 中移除

 <div id="app">
        
if='greeting'>hello
 div>

    var vm = new Vue({
        el: '#app',
        data: {
            greeting:false
        }
    })

代码示例中我们发现，* v-if 的值直接影响到了它所绑定的 DOM 元素是否存在*

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

<div id="app">
        <p v-if='greeting'>hellop>
        <p v-else>nop>
 div>

v-else必须紧跟在 v-if 或者 v-show 后面，否则将不会被识别

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

创建一个