• 售前

  • 售后

热门帖子
入门百科

vue实现登录类型切换

[复制链接]
六翼天使494 显示全部楼层 发表于 2021-10-26 13:53:17 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了vue实现登录范例切换的详细代码,供各人参考,详细内容如下
运行效果

代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>登录类型切换</title>
  6.   <script src="../js/vuejs-2.5.16.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <span v-if="isUser">
  11.     <label for="userAccount">用户账户:</label>
  12.     <input type="text" id="userAccount" placeholder="请输入账户" key="userAccount">
  13.   </span>
  14.   <span v-else>
  15.     <label for="userEmail">用户邮箱:</label>
  16.     <input type="text" id="userEmail" placeholder="请输入邮箱" key="userEmail">
  17.   </span>
  18.   <button @click="changeType">切换类型</button>
  19. </div>
  20. </body>
  21. <script>
  22.   const app = new Vue({
  23.     el: '#app',
  24.     data: {
  25.       isUser: true
  26.     },
  27.     methods:{
  28.       changeType(){
  29.         return this.isUser = ! this.isUser
  30.       }
  31.     }
  32.   })
  33. </script>
  34. </html>
复制代码
代码片段剖析

以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作