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>