v-if实现简单的用户切换登录

最新推荐文章于 2024-04-19 19:43:17 发布

GG_Zdd

最新推荐文章于 2024-04-19 19:43:17 发布

阅读量1k

点赞数

分类专栏：前端 vue.js框架文章标签： vue.js 前端

本文链接：https://blog.csdn.net/GG_Zdd/article/details/112825581

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue.js框架

6 篇文章 0 订阅

订阅专栏

v-if实现简单的用户切换登录

前几天对v-if做了个简单的分析，今天想着写点啥，布尔判断进行切换，那就用户登录了。
上代码！代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--Vue里的复用问题 当进行点击事件时，input不再使用，
  默认value值是不变的所以会继续渲染,
  可添加键key的定义时可解决此问题-->
  <span v-if="userClick">
    <label for="username">用户登录</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">邮箱登录</label>
    <input type="text" id="email" placeholder="邮箱账号" key="email">
  </span>
  <button @click="userClick = !userClick">切换登录方式</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      //message: '你好！',
      userClick: true
    },
  })
</script>
</body>
</html>

效果图：
在这里插入图片描述

触发点击userClick，默认为true显示用户登录，反之为false显示邮箱登录，基于v-if进行判断实现一个简单的切换。
小问题：
就此我还发现当我在input标签内输入字符串的时候，在进行切换时发现会进行保留。
查了一下是vue.js中的复用，就是说当页面进行渲染的时候，会识别标签是否相同，如果相同则默认展示key的内容，而key在不指定的时候会默认为key=“key”，对应的值value=“value”，在页面赋于value为字符串内容时，key不变value自然也默认不变，保留之前的输入。
解决办法：
指定key当key不同时切换时，value自然也就跟着改变了。

GG_Zdd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if实现简单的用户切换登录

v-if实现简单的用户切换登录前几天对v-if做了个简单的分析，今天想着写点啥，布尔判断进行切换，那就用户登录了。上代码！代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <!--Vue里的复
复制链接

扫一扫