Vue2的侦听器简单使用案例：判断用户名是否存在_vue根据数据库用户名已存在-CSDN博客

本文链接：https://blog.csdn.net/weixin_71049947/article/details/128263972

需要相关导入文件的可以私聊我哦

实现思路

1.el指定好控制区域 #app

2.让用户输入框进行双向绑定一个ids变量,三个提示span绑定一个flag变量，让它们显示不同的内容

3. 开启watch侦听器，用方法的格式进行侦听用户输入的ids，开启自动侦听

4.进入侦听方法，先判断侦听到的数据的长度，如果长度<1就代表为空，给 flag = 0 ，提示 “ 请输入 ”

5.否则，循环遍历数据源的info数组，这个数组存了很多个对象，对象有我们的虚拟数据

6.在遍历的过程判断，如果侦听的newVal数据!=info数组的任意一个对象的uname，给 flag = 1 ，提示 “ 这个名字看起来很不错，可以用哦 ”

7.否则给 flag = 2 ，提示 “ 该名字已被占用 ” 并退出遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    &