【学习笔记】18-v-if、v-else的小案例

要求：

点击切换按钮，邮箱登陆和用户登陆的输入框，相互切换

代码示例

	<div id="app" >
		<span v-if="isUser">
			<label for="userinput">用户登陆</label>
			<input type="text" name="userinput" id="userinput" value="" placeholder="用户登录"/>
			</span>
		<span v-else>
			<label for="emailinput">邮箱登陆</label>
			<input type="text" name="emailinput" id="emailinput" value="" placeholder="邮箱登录"/>	
			</span>
		<button type="button" @click="isUser = !isUser">切换按钮</button>
	</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			isUser:true
		},
	})
</script>

显示结果

注意：

如果不想出现复用，可以在input里加个key，例如：key=“user” ，切换时，输入框里的text，就不会出现复用。虚拟Dom的概念。