vue实现登录类型切换
更新时间：2021年04月22日 10:40:52 作者：Distance-X
这篇文章主要为大家详细介绍了vue实现登录类型切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现登录类型切换的具体代码，供大家参考，具体内容如下
运行效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录类型切换</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="userAccount">用户账户：</label>
<input type="text" id="userAccount" placeholder="请输入账户" key="userAccount">
</span>
<span v-else>
<label for="userEmail">用户邮箱：</label>
<input type="text" id="userEmail" placeholder="请输入邮箱" key="userEmail">
</span>
<button @click="changeType">切换类型</button>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
},
methods:{
changeType(){
return this.isUser = ! this.isUser
}
}
})
</script>
</html>
代码片段解析
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了关于el-select组件设置默认值的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
基于Vue el-autocomplete 实现类似百度搜索框功能
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
在vue中，子组件如果想修改父组件的变量，一般做法是通过绑定事件的方法，父组件向子组件传递修改变量的方法，子组件触发修改变量的方法执行，这种方式中规中矩；另一种方法是使用sync修饰符，此方法可以减少很多代码量2022-08-08
在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下2022-11-11
这篇文章主要介绍了vue实现一个简单的吸顶、锚点和滚动高亮按钮效果,需要的朋友可以参考下2019-10-10
在前端开发的时候经常会遇到这样的困惑,设计师给你的设计稿的尺寸和页面的尺寸不一致,导致了页面无法正常显示,下面这篇文章主要给大家介绍了关于一招解决vue页面自适应布局的相关资料,需要的朋友可以参考下2022-07-07
vue项目报错Uncaught runtime errors的解决方案
使用vue-cli的vue项目,出现编译错误或警告时,在浏览器中显示全屏覆盖,提示报错Uncaught runtime errors,本文给大家介绍了vue项目报错Uncaught runtime errors的解决方案,需要的朋友可以参考下2024-01-01
下面小编就为大家分享一篇浅谈VUE监听窗口变化事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了基于vue、react实现倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要介绍了使用keep-alive时,数据无法刷新的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论