Vue.js 条件渲染 v-if、v-show、v-else

v-if  

v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。

< html  lang = "en" >
< head >
    < meta  charset = "UTF-8" >
    < title >Title title >
head >
< body >
< div  id = "example" >
    < p  v-if = "greeting" >Hello p >
div >

< script  src = "js/vue.js" > script >
< script >
    var vm2 = new Vue({
        el:'#example',
        data:{
            greeting:true  //或false
        }
    })
script >
body >
html >

greeting取值为true，效果截图：

greeting取值为false，效果截图：

template v-if

因为v-if是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，则可以把