VUE学习-条件渲染

条件渲染

v-if & v-else-if & v-else

<div id="app">
	<h1 v-if="type == 'VUE'">Vue is awesome!</h1>
	<h1 v-if="type == 'HTML'">Vue is awesome!</h1>
	<h1 v-else>Oh no 😢</h1>
</div>
<script>
new Vue({
	el: '#app',
	data:{type:'HTML'}
})
</script>

用key管理复用组件

<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>
<input type="button" @click="loginType == 'username'? 'email':'username'"/>

需添加一个具有唯一值的 key attribute。这样每次切换时，输入框都将被重新渲染。保证清除用户已经输入的内容。

v-show

<div id="app">
	<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
	el:'#app',
	data:{ok:true}
})
</script>

v-if & v-show

1. v-if 是在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 只是简单地切换元素的 CSS property display。
2. v-if 支持 <template> 元素。v-show 不支持 <template> 元素。
3. v-if 有更高的切换开销。而 v-show 有更高的初始渲染开销。

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