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

巴特西

vue学习(十二) 指令v-if v-show 控制页面标签的显示与隐藏

最新文章

热门文章