Vue - 条件渲染

最新推荐文章于 2023-04-21 14:39:15 发布

aicy0211

最新推荐文章于 2023-04-21 14:39:15 发布

阅读量88

点赞数 1

分类专栏： js vue

本文链接：https://blog.csdn.net/aicy0211/article/details/99975667

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue中的条件渲染，重点讲解了v-if、v-else-if、v-else和v-show的用法，并通过案例展示了它们的区别。在效果相同的情况下，v-if会根据条件决定元素是否存在，而v-show则是通过改变display属性来隐藏元素。当条件切换频繁时推荐使用v-show，否则推荐v-if，以节省性能。

摘要由CSDN通过智能技术生成

Vue - 条件渲染：v-if 、v-else-if、v-else、 v-show

v-if
v-else-if
v-else
v-show 条件展示

简单明了，直接上案例：

案例：

<body>
  <div id="app">

    <h3> 条件渲染 - 单路分支 </h3>
    <p v-if = "flag"> A </p>

    <h3> 条件渲染 - 双路分支 </h3>
    <p v-if = "flag"> A </p>
    <p v-else > B </p>

    <h3> 条件渲染 - 多路分支 </h3>
    <p v-if = "type === '美食'"> 美食 </p>
    <p v-else-if = " type === '游戏' "> 游戏 </p>
    <p v-else> 睡觉 </p>

    <h3> 条件展示 </h3>
    <p v-show = " showFlag "> 条件展示 </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      flag: true,
      type: '美食',
      showFlag: true
    }
  })
  </script>

页面输出：
在这里插入图片描述

`总结`：

思考： v-if vs v-show
1. 效果看起来一样
2. why Vue要出两个相似的指令？
v-if控制的是元素的存在与否
v-show控制的是元素的display:none属性

得出结论：如果出事条件为假时，v-show 的性能损耗比v-if 高。
所以项目中：
频繁切换用 v-show
如果不是很频繁的切换，那我们用 v-if

aicy0211

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue - 条件渲染

Vue - 条件渲染：v-if 、v-else-if、v-else、 v-showv-ifv-else-ifv-elsev-show 条件展示简单明了，直接上案例：案例：<body> <div id="app"> <h3> 条件渲染 - 单路分支 </h3> <p v-if = "flag">...
复制链接

扫一扫