Vue实现简易的切换登录方式
示例代码:
<div id="app">
<!-- 这里涉及到Vue的虚拟Dom,在输入框输入的内容点击切换时,输入框内容还在,要想不复用,可以加个key,key一样复用,不一样不复用 -->
<!-- 为v-if设置flag值,当其为true时显示账号登陆 -->
<span v-if="flag">
<label for="username">用户账号:</label>
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<!-- 为v-else设置flag值,当其为true时显示邮箱登陆 -->
<span v-else>
<label for="email">邮箱地址:</label>
<input type="text" id="email" placeholder="邮箱地址" key="email">
</span>
<button @click="change">切换登录</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello World',
flag: true,
},
methods: {
change() {
// 更改当前的flag值取反,实现切换方式
this.flag = !this.flag;
}
}
});
</script>
运行结果:
点击切换按钮:
由于给输入框设置了key的值,因此输入的内容不会复用:即再账号登陆界面输入的账号信息,再点击切换时,输入框内不会保留之前输入的值。这里涉及到虚拟DOM的知识点:
在vue中,由于存在虚拟DOM这一概念,当页面显示用户账号登陆的div时,在虚拟DOM中就已经对界面进行了渲染,当点击切换登录按钮时,虚拟DOM并不会立即重新创建一个div进行渲染,而是查看在虚拟DOM中是否有可复用的现成的已经渲染好的标签,在上述代码中,由于input输入框是两个div共有的,按钮也是两个div共有的,因此在虚拟DOM中不会重新创建input输入框,而是对用户账号登录中的虚拟DOM进行了复用,在不加key的情况下,input输入框两者用的其实是同一个(所以不加key在上一个界面输入的值,点击切换时还会保留),若想区分开两者间的input输入框,需要为其加上一个key属性以此来区别。