09.Vue基本语法介绍六

发表于 更新于 分类于 ， 阅读次数： 本文字数： 2.5k 阅读时长 ≈ 2 分钟
引言：

这一节介绍有关条件渲染的基本知识，

加油加油！！

条件渲染

条件渲染v-if

v-id用于条件性的渲染一块内容，只有当真值的时候才会被渲染

1
<h1 v-if="awesome">Vue is awesome!</h1>

还可以添加一个v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
	
	<div id="demo">
		<h1 v-if='awesome'>我能不能出来</h1>
		<h1 v-else>OOOOOh-------</h1>
		<button @click='isUp'>按钮</button>
	</div>

	<script>
		new Vue({
			el:"#demo",
			data:{
				awesome:true,
			},
			methods:{
				isUp:function(){
					return this.awesome=!this.awesome;
				}
			}
		})
	</script>
</body>

在<template>元素上使用v-if条件渲染分组

v-if只能添加到一个元素上，
当我们想切换多个元素的时候，可以把一个template元素当做不可见的包裹元素，并在上面使用v-if

1
2
3
4
5
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

还有v-else-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
	
	<div id="demo">
		<h1 v-if='awesome===2'>我能不能出来</h1>
		<h1 v-else-if='awesome===1'>我有点慌</h1>
		<h1 v-else>OOOOOh-------</h1>
		<button @click='isUp'>按钮</button>
	</div>

	<script>
		new Vue({
			el:"#demo",
			data:{
				awesome:2,
			},
			methods:{
				isUp:function(){
					return this.awesome=this.awesome-1;
				}
			}
		})
	</script>
</body>

用 key 管理可复用的元素

1
2
3
4
5
6
7
8
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

但有时我们需要两个元素独立，不要复用他们，只需要加一个key即可

1
2
3
4
5
6
7
8
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

注意，

总被渲染的v-show

1
<h1 v-show="ok">Hello!</h1>

不同的是v-show的元素始终会被渲染并保存在DOM中。v-show只是简单地切换元素的css属性display

注意，v-show 不支持