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比較好