• vue3 基础条件渲染 vif 和 vshow


    本篇讲 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: 可以进行分支判断, 这个我倒是在工作中用的不太多
  • 相关阅读:
    LIS问题:二分+DP
    AndroidBDMap学习05:连续定位地图
    AndroidBDMap学习04:定位配置的设置实现
    AndroidBDMap学习03:定位获取当前地点的信息
    AndroidBDMap学习02:获取用户的相关权限
    AndroidBDMap学习01:基于百度地图SDK的配置以及利用API实现一个简单的地图应用
    数据结构--可迭代红黑树模板类(C++)
    数据结构--大小根堆模板类(C++)
    Apache poi导出的文件损坏解决办法
    deepin图标显示不正常的问题解决
  • 原文地址:https://www.cnblogs.com/chenjieyouge/p/16632600.html
Copyright © 2020-2023  润新知