案例要求:
用户登录有两种方式选择,实现点击按钮,切换登录方式
实现方式:
给两种输入方式添加是否显示,给按钮添加事件,点击一次改变显示与否
涵盖知识:
v-if、@click
<div class='app'>
<p v-if='isshown'>用户账号<input type="text" value='用户名'><button @click=toggle()>切换登录</button></p>
<p v-if='isshowe'> 邮箱账号<input type="text" value='邮箱账号'><button @click=toggle()>切换登录</button></p>
</div>
<script src='../vue.js'></script>
<script>
const app = new Vue({
el: '.app',
data: {
message: '你好啊,世界!',
isshown: true,
isshowe: false
},
methods: {
toggle() {
this.isshowe = !this.isshowe
this.isshown = !this.isshown
}
}
})
</script>
更新,解决input复用情况,优化代码
问题:用户在输入数据,点击切换按钮时,前面input输入框的值会保留在切换之后,这是因为Vue在进行DOM渲染时,会尽可能复用相同的元素,而不是重新创建,解决方法,给对应的input添加一个key
<div class='app'>
<span v-if='isshow'>
<label for="username">用户账号</label>
<input type="text" id='username' placeholder="用户账号" key='username'>
</span>
<span v-else='isshow'>
<label for="email"> 邮箱账号</label>
<input type="text" id='email' placeholder='邮箱账号' key='email'>
</span>
<button @click='isshow=!isshow'>切换登录</button>
</div>
<script src='../vue.js'></script>
<script>
const app = new Vue({
el: '.app',
data: {
isshow: true
}
})
</script>