50. Vue名称案例-使用keyup事件监听
时间:2022-07-22
本文章向大家介绍50. Vue名称案例-使用keyup事件监听,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
在日常开发中,经常会有计算或者拼接输入框内容,然后在另一个输入框呈现的场景,例如:计算器、拼接名称等等。
那么假定本次的需求是一个填写名称的需求,具有三个文本框:
- 姓氏
- 名称
- 姓名
其中 姓名 由 姓氏 + 名称,下面来实现一下。
示例
1.首先编写基本的HTML,呈现三个输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- form>(label+input#input$+br)*3 -->
<form action="">
<label for="input1">姓氏:</label>
<input type="text" id="input1">
<br>
<label for="input2">名称:</label>
<input type="text" id="input2">
<br>
<label for="input3">姓名:</label>
<input type="text" id="input3">
<br>
</form>
</div>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
});
</script>
</body>
</html>
浏览器显示如下:
2.给三个文本框的值使用v-model
定义到data中
浏览器确认是否接收到了value,如下:
可以看到data的值已经与文本框对应上了。
3.给文本框设置keyup事件监听,并且修改fullname的值
在浏览器输入内容,确认效果:
- 索引优先队列-IndexedPrirotyQueue的原理及实现(源码)
- Java 集合系列02之 Collection架构
- 开发者需要掌握的JS事件
- Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
- Kosaraju算法、Tarjan算法分析及证明--强连通分量的线性算法
- 关于curl网站运维与开发的那些事
- 并查集Union-find及其在最小生成树中的应用
- go 语言的库文件放在哪里?如何通过nginx代理后还能正确获取远程地址
- 离线Tarjan算法-最近公共祖先问题
- Java文件上传下载实训
- 【网络编程系列】二:socket通信原理及实践
- textrank算法原理与提取关键词、自动提取摘要PYTHON
- 【网络编程系列】一:字节顺序的大端与小端表示法
- Linux下的make命令用法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP中单例模式的使用场景与使用方法讲解
- pytorch查看模型weight与grad方式
- php+ajax 文件上传代码实例
- PHP将整数数字转换为罗马数字实例分享
- PHP如何通过表单直接提交大文件详解
- PHP基于openssl实现的非对称加密操作示例
- python图片验证码识别最新模块muggle_ocr的示例代码
- virtualenv介绍及简明教程
- Keras 数据增强ImageDataGenerator多输入多输出实例
- TensorFlow中如何确定张量的形状实例
- 使用Dajngo 通过代码添加xadmin用户和权限(组)
- python和js交互调用的方法
- Python中flatten( ),matrix.A用法说明
- python中id函数运行方式
- CentOS 7如何实现定时执行python脚本