拼搏30天VUE.js之条件渲染（v-if 和 v-show）（Part5）

最新推荐文章于 2024-08-22 11:15:27 发布

原创最新推荐文章于 2024-08-22 11:15:27 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

VUE.js 专栏收录该内容

40 篇文章

订阅专栏

本文深入解析Vue中的v-if和v-show指令，阐述两者在条件渲染中的不同应用与性能考量，帮助开发者理解何时选择何种指令以优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PS：在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

咱们先来看v-if指令。其作用就是根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类。
轉載自大漠《Vue 2.0学习笔记：v-if 和 v-show》一文: https://www.w3cplus.com/vue/v-if-vs-v-show.html © w3cplus.com

* v-if

1-1：v-if="true"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if和v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="true">我出現了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
  }
})
</script>
</body>
</html>

結果為：

我出現了

1-2：v-if="XX"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="show">能看到我嗎？</p>
</div>   
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  }
})
</script>
</body>
</html>

結果為：

能看到我嗎？

1-3：template v-if = "true"

我们切换多个元素一般不这么使用，而是配合<template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template>元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if和v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <template v-if = "true">
	   <p>我在這裡1</p>
	   <p>我在這裡2</p>
	   <p>我在這裡3</p>
	</template> 
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
  }
})
</script>
</body>
</html>

結果為：

我在這裡1

我在這裡2

我在這裡3

1-4: template v-if = "XX"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if和v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <template v-if = "show">
	   <p>我在這裡1</p>
	   <p>我在這裡2</p>
	   <p>我在這裡3</p>
	</template> 
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
	  show:true
  }
})
</script>
</body>
</html>

結果為：

我在這裡1

我在這裡2

我在這裡3

2-1:v-else為false

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="show">能看到我嗎？1</p>
	  <p v-else="hide">能看到我嗎？2</p>
</div>   
<script>
new Vue({
  el: '#app',
  data: {
    show: true,
	  hide:false
  }
})
</script>
</body>
</html>

結果為：

能看到我嗎？1

2-2:v-else為true

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="show1">能看到我嗎？1</p>
	  <p v-else="show2">能看到我嗎？2</p>
</div>   
<script>
new Vue({
  el: '#app',
  data: {
    show1: false, 
	  show2: true
  }
})
</script>
</body>
</html>

結果為：

能看到我嗎？2

3-1：v-else-if

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="show == 1">能看到我嗎？1</p>
	<p v-else-if="show==2">能看到我嗎？2</p>
	  <p v-else="show==3">能看到我嗎？3</p>
</div>   
<script>
new Vue({
  el: '#app',
  data: {
    show: 3
  }
})
</script>
</body>
</html>

結果為：

能看到我嗎？3

4-1：v-show

v-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的。原文: https://www.w3cplus.com/vue/v-if-vs-v-show.html © w3cplus.com

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-show="true">能看到我嗎？1</p>
	<p v-show="hide">能看到我嗎？2</p>
</div>   
<script>
new Vue({
  el: '#app',
  data: {
    hide: false
  }
})
</script>
</body>
</html>

結果如下：

能看到我嗎？1