vue 实现不清除用户输入的信息（常见登录和注册切换场景）

在学习vue的时候发现一个很好用的功能，非常实用的使用场景有以下几点：

1. 用户登录的时候切换登录方式，已输入信息不删除。
2. 用户忘记是否注册，若登录输入信息提示未注册，在注册和登录之间进行转换，用户已经输入的信息不删除。
3. 输入验证码或者密码错误的时候输入的信息不删除，由用户自行修改。

官方文档的内容如下：

根据官方文档的说明，下面是我自己写的小demo

<template>
	<div id="app">
		<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>
		<button @click="fun">点击切换</button>
	</div>
</template>

<script>
	export default {
		name: '#app',
		data() {
			return {
				loginType: 'username'
			}
		},
		methods: {
			fun: function() {
				this.loginType == 'username' ? this.loginType = 'email' : this.loginType = 'username';
			}
		}
	}
</script>
<style>
</style>

假设输入123456，则切换的时候数据是不会丢失的。



再次根据官网的说明：

要想实现重新渲染的话，此时代码只需要修改两个地方即可。

<input placeholder="Enter your username" key="username-input">
<input placeholder="Enter your email address" key="email-input">

此时点击切换数据就会丢失了，因为重新渲染了。

参考文献

key管理可复用的元素