vue3 基础-条件渲染 v-if 和 v-show

2022-08-28 13:32:29 阅读：192 来源： 互联网

标签：const 渲染 app show else vue3 root 节点

本篇讲 vue 中对 dom 元素节点进行 "显示和隐藏" 的实现方式指令, 即 v-if 和 v-show. 其实一句话就能说明白, v-if 的底层是从 dom 树中增删节点; 而 v-show 的底层是 "display = none" 和 "display = block".

v-if

<!DOCTYPE html>
<html lang="en">
<head>
  <title>v-if</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { show: true }
      },
      template: `<div v-if="show">hello, youge</div>`
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

当 show = false 时候, 该元素节点不会进行展示. 查看渲染的代码可以发现, 在这个 root 节点下, 该 div 已经被删除掉了啦, 剩下了一个寂寞.

<-- v-if -->

v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <title>v-show</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { show: true }
      },
      template: `<div v-show="show">hello, youge</div>`
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

当 show: false 时, 该元素节点也不会进行展示, 查看渲染的代码可以发现, 在这个 root 节点下, 该 div 还是存在的

<div style="display: none;">hello, youge</div>

如果需要频繁显示和隐藏切换的, 就建议用 v-show, 如果低频操作就用 v-if 这个看个人喜好吧.

v-if | v-else-if | v-else

在 vue 里还提供了一种 if-else 这样的多分支条件来灵活配置哦.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>v-if-else</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          show: true,
          condition_01: false,
          condition_02: true
        }
      },
      template: `
      <div v-show="show">hello, youge</div>

      <div v-if="condition_01">if</div>
      <div v-else-if="condition_02">else-if</div>
      <div v-else>else</div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

需注意的是这里的 v-if, v-else-if 和 v-else 的这三个 dom 节点要连续一起保证这个分支结构的闭环.

最后再来小结一下吧:

v-show: 不会删掉 dom元素, 底层是 "display=none", 适用于频繁需要显示或隐藏的场景
v-if: 会增删掉 dom 元素节点, 适用于不那么频繁显示隐藏的场景, 如登录呀, 切换主题啥的
v-if, v-else-if, v-else: 可以进行分支判断, 这个我倒是在工作中用的不太多

标签：const,渲染,app,show,else,vue3,root,节点
来源： https://www.cnblogs.com/chenjieyouge/p/16632600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 基础-条件渲染 v-if 和 v-show