vuejs之v-on
时间:2022-07-23
本文章向大家介绍vuejs之v-on,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、看一个例子:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="事件绑定" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
food: '西红柿炒鸡蛋'
},
methods: {
doIt: function () {
//逻辑
alert("做it");
},
changeFood: function () {
this.food += "好好吃"
}
},
})
</script>
</body>
</html>
结果:
点击事件绑定或者v-on简写或者双击事件,会:
点击西红柿炒鸡蛋:
说明:v-on可以为标签绑定事件,语法:v-on:事件名="方法名" ,可以使用@事件名="方法名"进行简写。改变标签里的内容可以利用this进行修改,内容会同步更新。
二、使用带参数的函数和事件修饰符
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="按钮" @click="doIt(1,2)">
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['mike', 'bob', 'tom', 'jack'],
arr2: [{ color: 'red' }, { color: 'blue' }, { color: 'yellow' }],
},
methods: {
doIt: function (p1, p2) {
alert(p1 + p2);
},
sayHi: function () {
alert("你好啊");
},
},
})
</script>
</body>
</html>
效果:
点击按钮:
说明:在html标签中使用v-on时,参数保持一致即可。
在输入框中随便输入什么,按下回车键:
说明:v-on还可以使用各种各样的事件,具体可参考文档。
- 自己动手写区块链-发起一笔交易(Java版)
- 详解JavaScript跨域问题
- OpenStack Magnum及Liberty新功能简介
- JDK10要来了:下一代 Java 有哪些新特性?
- 是时候忘掉finalize方法了
- 学会一个JVM插件:使用HSDIS反汇编JIT生成的代码
- ONOS 实战分享(一):项目建立、调试到热部署
- 自己动手系列-延迟队列
- OVS中Action源码分析&自定义Action
- 读懂一行Full GC日志(回复JVM内存分配担保机制一文中 Mr/Mrs Xxx 在留言区提出的问题)
- 总结了一些指针易出错的常见问题(四)
- 当你在浏览器中输入Google.com并且按下回车之后发生了什么?
- 总结了一些指针易出错的常见问题(三)
- C++/C头文件 .h和 .c
- 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 数组属性和方法
- Django def clean()函数对表单中的数据进行验证操作
- Python3爬虫中Splash的知识总结
- Laravel框架自定义公共函数的引入操作示例
- PHP PDOStatement::setFetchMode讲解
- Python QTimer实现多线程及QSS应用过程解析
- PHP count()函数讲解
- Laravel中9个不经常用的小技巧汇总
- PHP simplexml_load_string()函数实例讲解
- php文件操作之文件写入字符串、数组的方法分析
- php xhprof使用实例详解
- PHP获取远程http或ftp文件的md5值的方法
- PHP addslashes()函数讲解
- PHP+swoole+linux实现系统监控和性能优化操作示例
- PHP中PCRE正则解析代码详解
- tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)