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

【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.lryc.cn/news/340657.html

相关文章:

  • 【应用】SpringBoot-自动配置原理
  • 中文编程入门(Lua5.4.6中文版)第十二章 Lua 协程 参考《愿神》游戏
  • C++笔记之注册回调函数常见的5种情况对比
  • 人工智能揭示矩阵乘法的新可能性
  • 实在智能携手长江新零售俱乐部:探秘实在Agent数字员工,开启零售品牌增长新篇章
  • 计算机科学与导论 第十七 十八章 计算理论,人工智能
  • linux 设置定时任务---学习
  • 钡铼IOy系列模块深挖工业场景需求提供丰富多样的I/O解决方案
  • 【刷题笔记】第三天
  • 开源模型应用落地-LangChain试炼-CPU调用QWen1.5(一)
  • STM32-模数转化器
  • 算法刷题记录2
  • 中国代工巨头旗下芯片公司遭网络攻击,千兆字节数据被泄露
  • 【ARM 裸机】汇编 led 驱动之基本语法
  • scala---基础核心知识(变量定义,数据类型,流程控制,方法定义,函数定义)
  • OSPF星型拓扑和MGRE全连
  • 智能时代中的工业应用中前所未有的灵活桥接和I/O扩展功能解决方案MachXO2系列LCMXO2-1200HC-4TG100I FPGA可编程逻辑IC
  • php:实现压缩文件上传、解压、文件更名、压缩包删除功能
  • 【机器学习】科学库使用第5篇:Matplotlib,学习目标【附代码文档】
  • Java面试八股文(JVM篇)(❤❤)
  • 「51媒体」如何有效进行媒体邀约,提升宣传传播效果?
  • docker初始化进程
  • 基于快照行情的股票/基金 1分钟 K 线合成指南
  • 新质生产力崛起:精益化能力助力企业转型升级
  • 开发了一个在线客服系统
  • cowa新的数据筛选代码
  • 项目篇 | 图书管理系统 | 管理员模块 | 图书管理 | 删除
  • 自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
  • 【Sql Server】锁表如何解锁,模拟会话事务方式锁定一个表然后进行解锁
  • 【大语言模型】轻松本地部署Stable Diffusion