vue之input输入框的几个事件
2024-09-05 12:52:51
事件简介
click 点击事件，一般不会用于input输入框，会用于按钮，用于输入框就有点像focus了，当点击输入框时会触发
blur 失去焦点事件，当失去焦点时会触发。
focus 获取焦点事件，当获得焦点时会触发。
input 在输入框中每输入一个字符都会触发一次
change 当输入框内容改变了，且失去焦点的时候会触发（注意，内容没改变是不会触发的！）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jQuery.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>点击时就会触发，一般用于点击按钮</p>
<input type="text" @click="clickBtn">
<p>失去焦点时就会触发</p>
<input type="text" @blur="blurFunc">
<p>获取焦点时就会触发</p>
<input type="text" @focus="focusFunc">
<p>每输入一个字符都会触发</p>
<input type="text" @input="inputFunc">
<p>当输入框内容改变了，且失去焦点的时候会触发（注意，内容没改变是不会触发的！）</p>
<input type="text" @change="changeFunc">
</div>
</body>
<script>
vm = new Vue({
el: '#app',
data: {
d1: {name: 'zzz', age: 10}
},
methods: {
clickBtn(){
console.log('click事件')
},
blurFunc(){
console.log('blur事件')
},
focusFunc(){
console.log('focus事件')
},
inputFunc(){
console.log('input事件')
},
changeFunc(){
console.log('change事件')
},
}
})
</script>
</html>
最新文章
- Html5 绘制旋转的太极图
- Socket.IO聊天室~简单实用
- 绕过HR破门而入的求职智慧
- centos搭建svn服务器并在windows实验
- 6/3 Sprint2 看板和燃尽图
- Shell练习 验证号码
- 【Android 界面效果31】Android--侧滑菜单应用的实现
- python(1) - 第一个程序 Hello World!
- rhel_6.x 安装mysql
- form表单标签的enctype属性的作用
- Hibernate-----5、持久化对象
- 图解SSIS监视文件夹并自动导入数据
- ant 配置expdp and impap
- css3特效
- 【.NetCore】基于jenkins以及gitlab的持续编译及发布
- HDU - 3037：Saving Beans
- Python-Django 路由控制器
- GBDT的数学原理
- 避免docker异常重启容器挂掉的解决方法
- liux三剑客grep 正则匹配