9.Vue指令：v-if、v-show、v-else

v-if

每次使用都会删除/创建dom，切换消耗性能高，加载时低，推荐在一次性加载时使用。
 

v-show

每次使用仅切换display:none样式，切换消耗性能低，加载时高，推荐频繁切换时使用。
 

v-if与v-show演示

//html
<div id="content">
	<button v-on:click="flag=!flag">切换隐藏/显示</button>
    <div v-if="flag">
        我是v-if
    </div>
    <div v-show="flag">
        我是v-show
    </div>
</div>

//js
var vm = new Vue({
    el:"#content",
    data:{
        flag:true
    }
});

运行：

点击后：

v-else

v-else=“XXX”，内容为false才展示。
 

v-if与v-else演示

//html
<div id="content">
    <button v-on:click="flag=!flag">切换</button>
    <p v-if="flag">111</p>
    <p v-else="flag">222</p>
</div>

//js
var vm = new Vue({
    el: "#content",
    data: {
        flag: true
    }
});

运行：

点击切换后：