前端框架Vue学习04——v-if和v-show的使用

最新推荐文章于 2023-06-06 16:03:09 发布

非正式搬砖工

最新推荐文章于 2023-06-06 16:03:09 发布

阅读量214

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37607502/article/details/102521674

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

v-if:每次都会重新删除或者创建元素，有较高的切换性能消耗
v-show:每次都不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式，有较高的初始渲染消耗
异同：如果元素涉及到频繁的切换，最好不要使用v-if,而是使用v-show,如果元素可能永远不会显示出来被用户看到，则推荐使用v-if.

<body>
	<div id="app">
        <!-- <p>{{ msg }}</p> -->
        <input type="button" value="toggle" @click="toggle">

        <h3 v-if="flag">这是v-if控制的元素</h3>
        <h3 v-show="flag">这是v-show控制的元素</h3>
	</div>	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
                // msg:'hello world'
                flag:true
			},
			methods:{
                toggle(){
                    this.flag = !this.flag                }
            }
		});
	</script>
</body>

浏览器显示：
在这里插入图片描述
点击toggle之后：