Vue.js 学习笔记五：条件判断

目录

条件判断

v-if、v-else-if、v-else

用 key 管理可复用的元素

v-show

---

条件判断

v-if、v-else-if、v-else

使用见 Vue 基本使用 - 常用模板语法 - 指令操作。

 

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

		<div id="app">
				<label for="account" v-if="loginType== 'account'">
					account 
					<input type="text" id="account" placeholder="Enter your account"/>
				</label>
				<label for="email" v-if="loginType == 'email'">
					email 
					<input type="text" id="email" placeholder="Enter your email"/>
				</label>
				<button type="button" @click="toggleLoginType">切换登录方式</button>
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					loginType:'account'
				},
				methods:{
					toggleLoginType(){
						this.loginType = this.loginType == 'account' ? 'email' : 'account'
					}
				}
			})
		</script>

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。但是按道理讲，我们应该切换到另外一个 input 元素中了。在另一个 input 元素中，我们并没有输入内容。为什么会出现这个问题呢？

这是因为 Vue 在进行 DOM 渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

在上面的案例中，Vue 内部会发现原来的input元素不再使用，直接作为 else 中的 input 来使用了。

如果我们不希望 Vue 出现类似重复利用的问题，可以给对应的 input 添加 key，并且我们需要保证 key 的不同。

		<div id="app">
				<label for="account" v-if="loginType== 'account'">
					account 
					<input type="text" id="account" placeholder="Enter your account" key="account"/>
				</label>
				<label for="email" v-if="loginType == 'email'">
					email 
					<input type="text" id="email" placeholder="Enter your email" key="email"/>
				</label>
				<button type="button" @click="toggleLoginType">切换登录方式</button>
		</div>

 

v-show

v-show 的用法和 v-if 非常相似，也用于决定一个元素是否渲染。

		<div id="app">
			<p v-show="isShow">{{ msg }}</p>
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					msg:'hello vue',
					isShow: true
					}
			})
		</script>

v-if 和 v-show 对比

v-if 当条件为 false 时，压根不会有对应的元素在 DOM 中。

v-show 当条件为 false 时，仅仅是将元素的 CSS display 属性设置为 none 而已。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

注意，v-show 不支持 <template> 元素，也不支持 v-else。