- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

Vue核心⑦(条件渲染)

十八岁讨厌编程发表于 2022/08/06 00:28:47 2022/08/06

【摘要】文章目录条件渲染v-showv-ifv-if与template的组合使用总结条件渲染 v-show 隐藏元素，但是在网页源码中的结构仍然存在例如： <body> ...

文章目录

条件渲染

条件渲染

v-show

隐藏元素，但是在网页源码中的结构仍然存在
例如：

<body>
    <div id="root">
        <h1>这是数字{{n}}</h1>
        <h1 v-show="n===1">我出现了</h1>
        <h1 v-show="n===1">我还出现</h1>
        <h1 v-show="n===1">我再出现</h1>
        <button @click="n++">点我数字变大</button>
    </div>    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            n:0
        }
    })
</script>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

结果：

v-if

隐藏元素，但是结构在源码中不再存在。(相当于在DOM中把这个节点删除了)

所以在需要隐藏大量的结点的时候，最好使用show效率更高。频繁的操作增删DOM节点的效率肯定不及第一种效率高。

既然存在v-if那么也会存在v-else-if、v-else，他们的语义和if、else if、else是一样的。

例如：

<body>
    <div id="root">
        <h1>这是数字{{n}}</h1>
        <h1 v-if="n===1">我出现了</h1>
        <h1 v-else-if="n===1">我还出现</h1>
        <h1 v-else-if="n===1">我再出现</h1>
        <button @click="n++">点我数字变大</button>
    </div>    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            n:0
        }
    })
</script>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

结果：

将三者组合：

<body>
    <div id="root">
        <h1>这是数字{{n}}</h1>
        <h1 v-if="n===1">我出现了</h1>
        <h1 v-else-if="n===1">我还出现</h1>
        <h1 v-else-if="n===1">我再出现</h1>
        <h1 v-else>我最先出现</h1>
        <button @click="n++">点我数字变大</button>
    </div>    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            n:0
        }
    })
</script>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18