vue课程69 判断用户名是否被占用

简介: vue课程69 判断用户名是否被占用
<!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>
</head>
<body>
  <div id="app">
    <input type="text" v-model="username">
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script src="./lib/jquery-v3.6.0.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器,都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
        // 新值在前,旧值在后
        username(newVal) {
          if (newVal === '') return
          // 1. 调用 jQuery 中的 Ajax 发起请求,判断 newVal 是否被占用!!!
          $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
            console.log(result)
          })
        }
      }
    })
  </script>
</body>
</html>
相关文章
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js的计算机office课程平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js的计算机office课程平台附带文章和源代码设计说明文档ppt
9 1
|
4天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
24 1
|
2天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的《数据库系统原理》课程平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的《数据库系统原理》课程平台附带文章和源代码设计说明文档ppt
8 1
|
2天前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的网络类课程思政学习系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的网络类课程思政学习系统附带文章和源代码设计说明文档ppt
7 0
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js的课程辅助教学平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js的课程辅助教学平台附带文章和源代码设计说明文档ppt
7 0
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js的数据结构课程网络学习平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js的数据结构课程网络学习平台附带文章和源代码设计说明文档ppt
12 2
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js的课程管理系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js的课程管理系统附带文章和源代码设计说明文档ppt
9 1
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js的计算机公共基础课程mooc教学平台附带文章和源代码设计说明文档ppt
基于ssm+vue.js的计算机公共基础课程mooc教学平台附带文章和源代码设计说明文档ppt
8 1
|
3天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
3天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用