<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求设计:
1.用户登陆时,可以切换使用用户账户登陆还是邮箱地址登陆
-->
<div id="vue">
<span v-if="isUser">
<!--此时laybel中的for的用处就是当点击用户账户时,
键盘输入的焦点就会聚焦到 id为 username的input输入框
-->
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="请输入用户账号">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="请输入用户邮箱">
</span>
<!--点击事件触发后取反.这一点与之前的那个 coutn++ 相同-->
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#vue',
data: {
isUser: true
}
});
</script>
</body>
</html>
问题:input的输入框的值会保留在当前框内
切换前
切换后
原因:vue 内部的虚拟DOM
vue 在渲染前,会进行一个虚拟DOM 与浏览器DOM进行对比,如果input框在切换前后都在用,vue引擎就会直接引用这个input节点,并不会重新创建一个input节点,因为导致节点的数值还是会保留下来。
避免vue引擎对虚拟节点的复用