[Vue]条件渲染

最新推荐文章于 2024-06-28 18:39:53 发布

小炜1128

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量343

点赞数

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

本文链接：https://blog.csdn.net/m0_53022813/article/details/127219303

版权

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

90 篇文章 28 订阅

订阅专栏

文章目录

1. 使用v-show做条件渲染
2. 使用v-if做条件渲染
3. v-else-if 与 v-else
4. template
5. v-if 和 v-show 的区别

1. 使用v-show做条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1 v-show="isShow">Hello World!</h1>
    <!-- 在v-show中也可以写表达式 -->
    <h1 v-show="1 == 1">Hello World!</h1>
    <button @click="changeIsShow">标题的显示/隐藏</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      // 用于控制是否显示
      isShow: true
    },
    methods: {
      // 改变标签元素状态
      changeIsShow() {
        this.isShow = !this.isShow
      }
    }
  })
</script>
</html>

2. 使用v-if做条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1 v-if="isShow">Hello World!</h1>
    <!-- 在v-if中也可以写表达式 -->
    <h1 v-if="1 == 1">Hello World!</h1>
    <button @click="changeIsShow">标题的显示/隐藏</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      // 用于控制是否显示
      isShow: true
    },
    methods: {
      // 改变标签元素状态
      changeIsShow() {
        this.isShow = !this.isShow
      }
    }
  })
</script>
</html>

3. v-else-if 与 v-else

注意：使用 v-else-if 与 v-else 的前面必须有 v-if ，否则会报错，且条件判断渲染也不能正常实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>{{n}}</h1>
    <button @click="n++;">n++</button>
    <h2 v-if="n === 1">1</h2>
    <h2 v-else-if="n === 1">2</h2>
    <h2 v-else-if="n === 1">3</h2>
    <h2 v-else>else</h2>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      n: 0
    }
  })
</script>
</html>

注意：如果使用v-if ... v-else-if ... v-else中间不能被打断

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>{{n}}</h1>
    <button @click="n++;">n++</button>
    <h2 v-if="n === 1">1</h2>
    <h2>123</h2>
    <h2 v-else-if="n === 2">2</h2>
    <h2 v-else-if="n === 3">3</h2>
    <h2 v-else>else</h2>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      n: 0
    }
  })
</script>
</html>

4. template

使用template标签可以实现同时控制多个元素的显示与隐藏，同时不影响元素标签之间的结构，但是template只能配合v-if使用，不能与v-show一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>{{n}}</h1>
    <button @click="n++;">n++</button>
    <template v-if="n===1">
      <h2>1</h2>
      <h2>123</h2>
      <h2>2</h2>
      <h2>3</h2>
      <h2>else</h2>
    </template>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      n: 0
    }
  })
</script>
</html>

5. v-if 和 v-show 的区别

实现原理不同：

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1 v-show="isShow">Hello World!</h1>
    <h1 v-if="isShow">Hello World!</h1>
    <button @click="changeIsShow">标题的显示/隐藏</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      isShow: true
    },
    methods: {
      changeIsShow() {
        this.isShow = !this.isShow
      }
    }
  })
</script>
</html>