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