vue登录注册切换的坑

以下代码是可以用的:

就是通过data的数据控制同级div的显示和隐藏是可行的,原来以为参考的代码出问题了,找了一下午加一个晚上,最后将原来页面的内容放到一个新的页面上,又剔除各种复杂的id,button,事件等,才证明这个方法是可行的。原来以为多余的那些东西没有影响的,直到删除了它们,console不显示异常,才搞清楚v-show控制div显示异常的真正原因,居然是一个触发的注册事件函数没有定义。

唉唉唉,还是不能想当然,清除异常要清除控制台的异常。

<template>
<div>
  <div v-show=showRegister><!--注册页面-->
  ddddsssssssssssssss
  <span  v-on:click="ToLogin">没有账号?马上注册</span>
  </div>
  <div v-show=showLogin><!--登陆页面-->
    <h3>登录</h3>
    <p v-show="showTishi">nn</p>
    <button >登录</button>
    <span v-on:click="ToRegister">没有账号?马上注册</span>
  </div>
</div>
</template>
<script>
export default {
  data(){
    return {
      showRegister:true,
      showLogin:false,
      showTishi:true,
      }
  },
  methods:{
    ToRegister(){
      this.showRegister=true,
      this.showLogin=false
    },
    ToLogin(){
      this.showRegister=false,
      this.showLogin=true
    }
  }
}
</script>

  

 

 

转载于:https://www.cnblogs.com/Zhengxiaoxiao/p/10807197.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3实现登录注册切换tab可以使用Vue Router和Vue数据绑定机制来实现。 首先,需要安装和配置Vue Router。在项目中安装Vue Router,并在main.js文件中导入和使用Vue Router。 ``` // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` 接下来,需要创建登录和注册组件。可以分别创建Login.vue和Register.vue组件。 ``` // Login.vue <template> <div> <h2>登录</h2> <!-- 登录表单 --> </div> </template> <script> export default { name: 'Login', } </script> ``` ``` // Register.vue <template> <div> <h2>注册</h2> <!-- 注册表单 --> </div> </template> <script> export default { name: 'Register', } </script> ``` 然后,在App.vue组件中创建导航菜单和切换tab的功能。使用Vue数据绑定机制来切换tab。 ``` // App.vue <template> <div> <nav> <ul> <li @click="activeTab = 'login'" :class="{ active: activeTab === 'login' }">登录</li> <li @click="activeTab = 'register'" :class="{ active: activeTab === 'register' }">注册</li> </ul> </nav> <router-view :tab="activeTab" /> </div> </template> <script> export default { name: 'App', data() { return { activeTab: 'login', } }, } </script> ``` 最后,在router.js文件中配置路由。 ``` // router.js import { createRouter, createWebHistory } from 'vue-router' import Login from './Login.vue' import Register from './Register.vue' const routes = [ { path: '/login', component: Login, }, { path: '/register', component: Register, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` 完成以上步骤后,就可以根据点击导航菜单来切换登录注册页面的tab了。点击导航菜单时,会触发activeTab的值改变,从而切换显示的组件。同时,Vue Router会根据路由的配置来加载相应的组件,实现路由切换的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值