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

本篇讲 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: 可以进行分支判断, 这个我倒是在工作中用的不太多
posted @ 2022-08-28 13:05  致于数据科学家的小陈  阅读(393)  评论(0)  编辑  收藏  举报