当前位置: 首页 > news >正文

Vue-03.指令-v-on

 v-on                        为HTML标签绑定事件

代码演示:

在下面的代码中,在input标签中定义了一个按钮,并且使用v-on为input标签绑定了一个事件click,当鼠标点击该按钮时,会触发指定的方法handle,如果该方法有返回值,则在视图区域的方法handle后面加上()。如果没有返回值则可以不加,这里加上了。

在定义的vue对象中,在methods区域定义了一个method为handle()。当点击时会触发该方法弹出“被点了一下~~~”。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<!-- v-on                        为HTML标签绑定事件 -->
<body><!-- 3.定义vue所要操作的视图 --><div id="app"><input type="button" value="点我一下" v-on:click="handle()"> <!-- event指定要绑定的是什么事件 函数里不需要传递参数,()可以加可以不加 --><input type="button" value="点我一下" @click="handle()">  <!--  --></div>
</body>
<script>// 2.创建vue对象,指定vue的管辖区域,数据和方法new Vue({el:"#app",data:{},methods: {handle:function() {alert("被点了以下~~~");}},})
</script>
</html>

http://www.lryc.cn/news/420596.html

相关文章:

  • 接口基础知识6:详解http request body(一篇讲完常见请求体)
  • Windows Server 安装Web,DHCP,DNS,FTP四大服务及其配置和监控方式
  • 创意指南丨VR游览沉浸式空间体验
  • 【iOS】—— autoreleasePool以及总结
  • 培训第二十五天(python中执行mysql操作并将python脚本共享)
  • LVS实战项目
  • 笔记小结:《利用python进行数据分析》之层次化索引
  • Linux的线程篇章 - 线程池、进程池等知识】
  • 汇昌联信做拼多多运营正规吗?
  • 240810-Gradio自定义Button按钮+事件函数+按钮图标样式设定
  • 排序算法--快速排序
  • springMVC -- 学习笔记
  • 修复本地终端(windows)连接服务器使用zsh出现乱跳的问题
  • 【扒代码】regression_head.py
  • vue2 使用axios 请求后台返回文件流导出为excel
  • MATLAB数据可视化:在地图上画京沪线的城市连线
  • 【AI】CV基础1
  • 数据结构《栈》
  • 说一说mysql的having?和where有什么区别?
  • LeetCode45. 跳跃游戏 II
  • 算法打卡 Day19(二叉树)-平衡二叉树 + 二叉树的所有路径 + 左叶子之和 + 完全二叉树的节点个数
  • 国际以太网专线 (IEPL)/国际专线(IPLC)-全球覆盖,无界沟通
  • 信息安全管理知识体系攻略(至简)
  • HCIE学习笔记:IPV6 地址、ICMP V6、NDP 、DAD (更新补充中)
  • 人工智能】Transformers之Pipeline(九):物体检测(object-detection)
  • [SWPUCTF 2021 新生赛]easy_md5
  • Redis面试题大全
  • 【langchain学习】BM25Retriever和FaissRetriever组合 实现EnsembleRetriever混合检索器的实践
  • 【C语言】预处理详解(上)
  • uni-app内置组件(基本内容,表单组件)()二