Vue之 v-if 和 v-show 的使用

最新推荐文章于 2024-02-21 11:35:36 发布

北海之灵

最新推荐文章于 2024-02-21 11:35:36 发布

阅读量791

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/xukongjing1/article/details/81587881

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

v-if 和 v-show 都能控制元素的隐藏和显示。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变则v-if 较好。

v-if 的特点：每次都会重新删除或创建元素。

v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none 样式。

下面是一个使用 v-if 和 v-show 的例子

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <input type="button" @click="flag=!flag" value="toggle"/>
    <!-- v-if的特点：每次都会重新删除或创建元素 -->
    <!-- v-show的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none 样式-->

    <!-- v-if有较高的切换性能消耗 -->
    <!-- v-show有较高的初始渲染消耗 -->

    <!-- 如果元素涉及到频繁的切换，最好不要使用v-if,推荐使用v-show -->
    <!-- 如果元素可能永远也不会被显示出来让用户看到，则推荐使用v-if -->
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
  </div>
</body>
<script src="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      flag:true,
    }
  });
</script>
</html>

北海之灵

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之 v-if 和 v-show 的使用

v-if 和 v-show 都能控制元素的隐藏和显示。一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变则v-if 较好。v-if 的特点：每次都会重新删除或创建元素。v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none 样式。下面是...
复制链接

扫一扫