Vue学习——条件渲染

最新推荐文章于 2024-09-12 16:43:23 发布

王猪精也

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量601

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript vue.js

本文链接：https://blog.csdn.net/weixin_44734398/article/details/121680916

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue.js中用于条件渲染的两种方法：v-if和v-show。v-if适合于切换频率较低的情况，它会从DOM树中移除不显示的元素；而v-show则适用于频繁切换，元素不会被移除，仅通过CSS隐藏。文中通过实例展示了它们的用法，并提到了v-if和v-show在实际应用中的选择考量。

摘要由CSDN通过智能技术生成

条件渲染

1. v-if

（1）写法：

v-if=“表达式”
v-else-if=“表达式”
v-else=“表达式”

（2）适用于： 切换频率较低的场景
（3）特点： 不显示的元素会直接从DOM树中移除
（4）注意： v-if、v-else-if、v-else可以一起使用，逻辑与js中if-else语句相同，但“结构”不能被打断。

<body>
  <div id="root">
    <h1>n = {{n}}</h1>
    <button @click="n++">n+1</button>
    <h1 v-if="n === 1">hello，{{name1}}</h1>
    <h1 v-else-if="n === 2">hello，{{name2}}</h1>
    <h1 v-else-if="n === 3">hello，{{name3}}</h1>
    <h1 v-else-if="n === 4">hello，{{name4}}</h1>
    <h1 v-else=>hello，BlackPink</h1>
  </div>

  <script>
    Vue.config.productionTip = false

    const vm = new Vue({
      el:'#root',
      data: {
        n: 0,
        name1: 'Jisoo',
        name2: 'Jennie',
        name3: 'Rose',
        name4: 'Lisa',
      }
    })
  </script>
</body>

2. v-show

（1）写法： v-show=“表达式”
（2）适用于： 切换频率高的场景
（3）特点： 不显示的元素不会从DOM树中移除，只是在样式上隐藏

<body>
  <div id="root">
    <h1>n = {{n}}</h1>
    <button @click="n++">n+1</button>
    <h1 v-show="n === 1">hello，{{name1}}</h1>
    <h1 v-show="n === 2">hello，{{name2}}</h1>
    <h1 v-show="n === 3">hello，{{name3}}</h1>
    <h1 v-show="n === 4">hello，{{name4}}</h1>
  </div>

  <script>
    Vue.config.productionTip = false

    const vm = new Vue({
      el:'#root',
      data: {
        n: 0,
        name1: 'Jisoo',
        name2: 'Jennie',
        name3: 'Rose',
        name4: 'Lisa',
      }
    })
  </script>
</body>