【vue】绑定事件 v-on

  • v-on
    • 简写:@
  • @click
  • @keyup
  • @keydown
  • @keyup.w
  • @keyup.ctrl.a

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 插值表达式 -->{{msg}}<h2>{{web.title}}</h2><h2>{{web.url}}</h2><!-- v-on例子 --><button v-on:click="edit">修改网址</button><br><!-- v-on简写 --><button @click="edit">修改网址(v-on简写)</button><hr><h2>{{web.user}}</h2>点文本框,按回车<input type="text" @keyup.enter="add(40,60)"><br>点文本框,按空格<input type="text" @keyup.space="add(40,60)"><br>点文本框,按Tab</Table><input type="text" @keydown.tab="add(40,60)"><br>点文本框,按w<input type="text" @keyup.w="add(40,60)"><br>Ctrl+Enter<input type="text" @keyup.ctrl.enter="add(40,60)"><br>Ctrl+a<input type="text" @keyup.ctrl.a="add(40,60)"><br></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({title: "tao355667",url: "tao355667.com",user: 0})const edit = () => {web.url = "http://www.tao355667.com"}const add = (a, b) => {web.user += a + b}return {msg: "success",web,edit,add}}}).mount("#app")</script>
</body></html>

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

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

相关文章

BK9534 博通BEKEN 无线麦克风芯片 提供配置工具软件

BK9534 芯片是在 BK9532 芯片基础上增加了一个内置MCU 来实现单芯片简单工作模式&#xff0c;内置己经固化了如开关机&#xff0c;对码&#xff0c;低电侦测&#xff0c;自动频率跟随等基本功能。另外还可以借助工具修改如频率&#xff0c;ID等相关配置信息. 1. 升级了接收芯片…

SpringBoot修改菜品模块开发

需求分析与设计 一&#xff1a;产品原型 在菜品管理列表页面点击修改按钮&#xff0c;跳转到修改菜品页面&#xff0c;在修改页面回显菜品相关信息并进行修改&#xff0c;最后点击保存按钮完成修改操作。 修改菜品原型&#xff1a; 二&#xff1a;接口设计 通过对上述原型图…

Midjourney常见玩法及prompt关键词技巧

今天系统给大家讲讲Midjourney的常见玩法和prompt关键词的一些注意事项&#xff0c;带大家入门&#xff5e;&#xff08;多图预警&#xff0c;建议收藏&#xff5e;&#xff09; 一、入门及常见玩法 1、注册并添加服务器&#xff08;会的童鞋可跳过&#xff5e;&#xff09; …

SpringBoot与MyBatisPlus的依赖版本冲突问题

记录使用SpringBoot和MyBatisPlus时遇到的版本冲突问题解决。 java版本&#xff1a;jdk17 废话&#xff1a;&#xff09;目前在IDEA中使用Spring官方的脚手架最低jdk版本竟然是jdk17了。 当使用SpringBoot3.0版本(3.2.4)&#xff0c;配合使用MP3.5.2版本时报错&#xff1a; Er…

H5代码video标签引入视频在浏览器的兼容性问题解决办法

H5标签video引入视频&#xff0c;在谷歌浏览器正常但是在火狐浏览器和版本较低的浏览器或者IE浏览器却无法观看视频&#xff0c;只能看到音频&#xff0c;是什么原因&#xff1f; 代码如下 <video class"video" muted loop"loop" style"display…

前端三剑客 —— JavaScript (第九节)

目录 内容回顾&#xff1a; 1.事件解除 2. Ajax jQuery选择器 回顾CSS选择器 CSS选择 1.基本选择器 2.包含选择器 3.伪类选择器 4.伪元素选择器 5.属性选择器 jQuery 库 jQuery 动画 系统动画 自定义动画 常见API操作 内容回顾&#xff1a; 1.事件解除 如果是使…

《由浅入深学习SAP财务》:第2章 总账模块 - 2.6 定期处理 - 2.6.3 月末操作:外币评估

2.6.3 月末操作&#xff1a;外币评估 企业的外币业务在记账时一般使用期初的汇率或者即时汇率&#xff0c;但在月末&#xff0c;需要按照月末汇率对外币的余额或者未清项进行重估&#xff08;revaluation&#xff09;。 企业在资产负债表日&#xff0c;应当按照下列规…

微信小程序全局配置

全局配置文件及常用的配置项 小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下&#xff1a; ① pages 记录当前小程序所有页面的存放路径 ② window 全局设置小程序窗口的外观 ③ tabBar 设置小程序底部的 tabBar 效果 ④ style 是否启用新版的组件样…

SpringBoot菜品分页查询模块开发(多表连接查询)

需要注意的地方 为什么创建VO类怎么进行多表连接查询分页查询的统一返回结果类PageResult分页查询Mapper的返回结果是Page<目标实体类> 需求分析与设计 一&#xff1a;产品原型 系统中的菜品数据很多的时候&#xff0c;如果在一个页面中全部展示出来会显得比较乱&…

华火电燃灶荣获国家级科技型中小企业

华火电燃灶作为一家国家级科技型中小企业&#xff0c;凭借其创新的技术和卓越的产品性能&#xff0c;在新能源厨电领域取得了显著的成就。华火&#xff0c;潜心钻研等离子电生明火技术近十年&#xff1b;华火电燃灶&#xff0c;电生明火&#xff0c;以“电”作为唯一能源&#…

创建影子用户

文章目录 1.认识影子用户2.创建隐藏账户并加入管理员组3.修改注册表3.删除用户4.添加管理员权限 1.认识影子用户 影子用户通常指的是那些在系统用户列表中不可见&#xff0c;但在某些情况下可以进行操作的用户。在内网渗透过程中&#xff0c;当我们拿到shell时&#xff0c;肯定…

uniapp--登录和注册页面-- login

目录 1.效果展示 2.源代码展示 测试登录 login.js 测试请求 request.js 测试首页index.js 1.效果展示 2.源代码展示 <template><view><f-navbar title="登录" navbarType="4"></f-navbar><view class="tips">…

碳课堂|碳关税是什么?企业如何从容应对?

2023年10月1日&#xff0c;欧盟碳边境调节机制&#xff08;CBAM&#xff09;法规&#xff0c;即全球首个“碳关税”开始实施。据世界银行研究报告称&#xff0c;如果“碳关税”全面实施&#xff0c;在国际市场上&#xff0c;中国制造可能将面临平均26%的关税&#xff0c;出口量…

李沐41_物体检测和数据集——自学笔记

边缘框 1.一个边缘框可以通过4个数字定义&#xff08;左上xy&#xff0c;右上xy&#xff0c;左下xy&#xff0c;右下xy&#xff09; 2.标注成本高 目标检测数据集 1.每行表示一个物体&#xff08;图片文件名、物体类别、边缘框&#xff09; 2.COCO&#xff1a;80物体、330…

前端跨域怎么办?

如果网上搜到的方法都不可行或者比较麻烦&#xff0c;可以尝试改变浏览器的设置&#xff08;仅为临时方案&#xff09; 1.新建一个Chrome浏览器的快捷方式 2.鼠标右键&#xff0c;进入属性&#xff0c;将以下命令复制粘贴到目标位置&#xff08;可根据Chrome实际存放位置修改…

数据结构之树的性质总结

节点的度&#xff1a;该节点拥有的孩子个数 叶子节点&#xff1a;度为0的节点 层数&#xff1a;根节点为第一层&#xff0c;根的子节点为第二层&#xff0c;以此类推 所有树的性质&#xff1a;所有节点的总度数等于节点数减一 完全m叉树性质 完全m 叉树&#xff0c;节点的…

【Hello算法】 > 第 2 关 >数据结构 之 数组与链表

数据结构 之 数组与链表 1&#xff1a;Understanding data structures &#xff01;——了解数据结构——1.1&#xff1a;Classification-分类-1.2&#xff1a;Type-类型- 2&#xff1a;Arrays are the bricks that make up the wall of data structures *——数组是组成数据结…

ActiveMQ介绍及linux下安装ActiveMQ

ActiveMQ介绍 概述 ActiveMQ是Apache软件基金下的一个开源软件&#xff0c;它遵循JMS1.1规范&#xff08;Java Message Service&#xff09;&#xff0c;是消息队列服务&#xff0c;是面向消息中间件&#xff08;MOM&#xff09;的最终实现&#xff0c;它为企业消息传递提供高…

Linux_iptables防火墙学习笔记

文章目录 iptables 概述四表五链iptables 安装启动iptables 配置详解iptables配置文件iptables配置语法iptables常用实例查看规则修改默认规则保存和备份规则恢复备份的规则清空规则放行SSH服务在ubuntu14.04中iptables规则持久化 iptables 概述 主机型 对主机进行保护 网络型…

Linux第89步_了解异步通知及其结构和函数

1、了解“异步通知” “异步通知”的核心就是信号。信号是采用软件模拟的“中断”&#xff0c;它由“驱动程序”主动向“应用程序”发送信号&#xff0c;并报告自己可以访问了&#xff0c;“应用程序”收到信号以后&#xff0c;就从“驱动设备”中读取或者写入数据。整个过程就…