vue學習(十二) 指令v-if v-show 控制頁面標簽的顯示與隱藏

//html
<div id="app">
　　<input type="button" value="toggle" @click="flag=!flag"/>
　　
　　<h3 v-if="flag">使用v-if控制的元素</h3>
　　<h3 v-if="flag">使用v-show控股之的元素</h3>
</div>

//script
<script>
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　flag:true
　　　　},
　　　　methods:{//methods中定義了當前vue實例中所有可用的方法
　　　　　　
　　　　}
　　})
</script>

注意：

v-if的特點：每次都會重新刪除或者創建元素

v-show的特點：每次不會進行dom的刪除和創建操作，只是切換了元素的display樣式 

一般來講，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗，因此如果需要頻繁切換v-show較好，如果在運行時條件不大可能改變v-if比較好