Vue-8、Vue事件处理

1、点击事件

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件处理</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><h1 >学校名称,{{name}}</h1><button v-on:click="showInfo">点我提示信息</button></div>
<hr>
<script type="text/javascript">Vue.config.productionTip = false; //阻止Vue启动时产生生产提示。//创建Vue实例const vm = new Vue({el:'#root',data:{name:'尚硅谷',address:'四川'},methods:{showInfo(event){console.log(event.target.innerText);console.log(this);//此处this是vmalert('同学你好');}}});
</script>
</body>
</html>

简写

  <button v-on:click="showInfo">点我提示信息</button><button @click="showInfo">点我提示信息</button>

方法传入参数

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件处理</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><h1 >学校名称,{{name}}</h1><button v-on:click="showInfo">点我提示信息</button><button @click="showInfo2(66,$event)">点我提示信息2</button>
</div>
<hr>
<script type="text/javascript">Vue.config.productionTip = false; //阻止Vue启动时产生生产提示。//创建Vue实例const vm = new Vue({el:'#root',data:{name:'尚硅谷',address:'四川'},methods:{showInfo(event){console.log(event.target.innerText);console.log(this);//此处this是vmalert('同学你好1');},showInfo2(number,event){console.log(event.target.innerText);console.log(number);console.log(this);//此处this是vmalert('同学你好2');}}});
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/608280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

0108作业

#include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {this->setWindowTitle("腾讯会议");this->resize(470,800);//设置界面大小this->setFixedSize(470,800);//锁定界面大小this->setStyleSheet("background-color:w…

信息系统安全——基于 AFL 的模糊测试

实验 3 基于 AFL 的模糊测试 3.1 实验名称 《基于 AFL 的模糊测试》 3.2 实验目 1 、熟悉模糊测试方法 2 、熟悉模糊测试工具 AFL 的使用 3.3 实验步骤及内容 1 、 安装 AFL 2 、 任意选择一个有源代码的样本 这里采用教材上一个包含栈溢出漏洞的样本。 3 、 结合源代码分析用 …

LinkedBlockingQueue原理探究

类图结构 同样首先看一下LinkedBlockingQueue的类图结构&#xff0c;以便从全局对LinkedBlockingQueue有个直观的了解。 由类图可以看到&#xff0c;LinkedBlockingQueue也是使用单向链表实现的&#xff0c;其也有两个Node,分别用来存放首、尾节点&#xff0c;并且还有一个初始…

x-cmd pkg | rg - 文本搜索工具,grep 命令的现代化替代品

目录 简介首次用户功能特点竞品和相关作品进一步阅读 简介 rg&#xff08;ripgrep&#xff09; 是一个逐行方式进行&#xff08; line-oriented &#xff09;的文本搜索工具&#xff0c;能够递归搜索目录中的文件内容。默认情况下&#xff0c;rg 将遵守 .gitignore 文件规则自…

内衣洗衣机哪些品牌质量好实惠?五款好用的迷你洗衣机

随着人们的生活水平的提升&#xff0c;越来越多小伙伴来开始追求更高的生活水平&#xff0c;一些智能化的小家电就被发明出来&#xff0c;而且内衣洗衣机是其中一个。现在通过内衣裤感染到细菌真的是越来越多&#xff0c;所以我们对内衣裤的清洗频次会高于普通衣服&#xff0c;…

视频号小店和抖音小店相比,新手做哪个比较好?

我是电商珠珠 抖音小店在19年被抖音所发展&#xff0c;在这过程中&#xff0c;抖音小店通过自身的不断完善&#xff0c;从兴趣电商到全域兴趣电商模式&#xff0c;从直播电商到商城的出现&#xff0c;凭借着门槛低流量高的优势&#xff0c;让很多商家尝到了红利。 尤其是在20…

大创项目推荐 深度学习实现行人重识别 - python opencv yolo Reid

文章目录 0 前言1 课题背景2 效果展示3 行人检测4 行人重识别5 其他工具6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的行人重识别算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c…

Java程序员面试-场景篇

前言 裁员增效潮滚滚而来&#xff0c;特总结一些实际场景方案的面试题&#xff0c;希望对大家找工作有一些帮助。 注册中心 题目&#xff1a; 有三台机器&#xff0c;分别部署了微服务A、微服务B、注册中心&#xff0c;其中A和B都有服务接口提供并正常注册到了注册中心&…

HttpServletRequest setHeader

HttpServletRequest setHeader

Python——欢迎来到吱昂张游乐园

欢迎来到吱昂张游乐园&#xff01;&#xff01;&#xff01; 凡是身高小于120或者您的vip等级大于三级的皆可免费游玩。 那我们接下来就来设计一下以上的规则叭 print("欢迎来到吱昂张游乐园") if int(input("输入您的身高&#xff1a;"))>120:print…

什么是全链路压测?

随着互联网技术的发展和普及&#xff0c;越来越多的互联网公司开始重视性能压测&#xff0c;并将其纳入软件开发和测试的流程中。 阿里巴巴在2014 年双11 大促活动保障背景下提出了全链路压测技术&#xff0c;能更好的保障系统可用性和稳定性。 什么是全链路压测&#xff1f;…

中兴服务器R5300 G5算力强劲,有力支撑企业数字化转型

去年&#xff0c;可以说是AIGC大模型全面崛起的一年&#xff0c;反映出人类算力技术的突出发展成果&#xff0c;也带动全球算力规模的进一步扩大。伴随着各行各业都在投身数字化转型&#xff0c;未来人们对于算力的需求更为庞大&#xff0c;因此需要性能更优的服务器来进行支撑…

用PDETool计算磁场

学习FEM和磁场&#xff0c;Matlab中的PDETool可以直观的展示数学的结果。 在PDETool中计算磁场的步骤如下&#xff1a; 1.启动matalb&#xff0c;输入命令pdetool 2.画三个矩形 3.在工具栏的下拉列表中选Magnetostatics 4.设置区域电密 在PDE菜单中&#xff0c;选择PDEmode…

【Flutter 开发实战】Dart 基础篇:从了解背景开始

想要学会用 Flutter 开发 App&#xff0c;就不可避免的要学习另一门很有意思的编程语言 —— Dart。很多小伙伴可能在学习 Flutter 之前可能都没听说过这门编程语言&#xff0c;我也是一样&#xff0c;还以为 Dart 是为了 Flutter 而诞生的&#xff1b;然而&#xff0c;当我们去…

目标检测数据集 - 夜间行人检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍&#xff1a;夜间、低光行人检测数据集&#xff0c;真实场景高质量图片数据&#xff0c;涉及场景丰富&#xff0c;比如夜间街景行人、夜间道路行人、夜间遮挡行人、夜间严重遮挡行人数据&#xff1b;适用实际项目应用&#xff1a;公共场所监控场景下夜间行人检测项目…

Android 13 移除下拉栏中的设置入口

介绍 因为当前项目的设置已被加密&#xff0c;客户不希望通过下拉窗口的设置图标进入设置&#xff0c;决定去掉该图标。 效果展示 分析 这里首先想到在SystemUI寻找这个图标的资源文件&#xff0c;找到资源文件后寻找对应控件调用的地方&#xff0c;根据id寻找控件代码即可。…

10Bean的循环依赖+反射机制

A对象中有B属性。B对象中有A属性。这就是循环依赖。我依赖你&#xff0c;你也依赖我。 比如&#xff1a;丈夫类Husband&#xff0c;妻子类Wife。Husband中有Wife的引用。Wife中有Husband的引用。 package com.sunsplanter.spring6.bean;public class Husband {private String…

亿尚网:撤柜上线电商+直播将成为美妆行业发展的绝佳组合

亿尚网&#xff1a;撤柜上线电商直播将成为美妆行业发展的绝佳组合 来源&#xff1a; 编辑&#xff1a;亿尚风范 时间&#xff1a;2024-01-09 随着社交媒体的兴起&#xff0c;网红经济逐渐成为市场中的一股不可忽视的力量。而在这其中&#xff0c;直播电商的模式更是为网红们…

没有货源是不是就没办法在家做抖店?打包发货怎么完成?解答如下

我是王路飞。 有人问了我一个问题&#xff1a;无货源模式的抖店&#xff0c;自己一个人在家里做不了是吧&#xff1f;毕竟打包发货这些问题怎么解决呢&#xff1f; 店铺要是发货不及时被平台罚款怎么办&#xff1f;产品有质量问题怎么解决呢&#xff1f;店铺一直不出单怎么办…

kubernetes RBAC Authentication 详解

开头语 写在前面&#xff1a;如有问题&#xff0c;以你为准&#xff0c; 目前24年应届生&#xff0c;各位大佬轻喷&#xff0c;部分资料与图片来自网络 内容较长&#xff0c;页面右上角目录方便跳转 Kubernetes 安全架构 K8S安全控制框架主要由下面3个阶段进行控制&#xf…