Vue入门-指令学习-v-on
v-on
作用：注册事件 = 添加监听 + 提供处理逻辑
语法：
v-on:事件名="内联语句"
v-on:事件名="methods中的函数名"
注意：" v-on："可以替换为" @ "
v-on:click="XXX" --> @click="XXX"
demo:
v-on:事件名="内联语句"的demo：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head><body><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button><!-- 可以赋值 --><!-- <button v-on:click="count=count+2">+</button> --></div><script src="js/vue.js"></script><script>const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',//通过data提供数据data: {count:100}})</script>
</body></html>页面效果图：
v-on:事件名="methods中的函数名"的demo：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head><body><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">Demo</h1></div><script src="js/vue.js"></script><script>const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',//通过data提供数据data: {isShow:true},methods:{fn(){console.log('执行了fn')}}})</script>
</body></html>页面效果：
demo2：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#app {width: 500px;height: 400px;border: 2px solid #333;padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}h2 {color: pink;font-size: 24px;margin-bottom: 20px;}button {padding: 10px 20px;font-size: 16px;border: none;border-radius: 4px;background-color: pink;color: black;cursor: pointer;margin-right: 10px;transition: background-color 0.3s ease;}button:hover {background-color: yellow;}</style><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head><body><div id="app"><h2>自动售卖机</h2><button @click="buy(3)">可乐 3 元</button><button @click="buy(10)">咖啡 10 元</button><button @click="buy(5)">牛奶 5 元</button></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {buy(price) {console.log('消费了' + price + '元');this.money -= price;}}});</script>
</body></html>页面效果：
相关文章：
Vue入门-指令学习-v-on
v-on 作用：注册事件 添加监听 提供处理逻辑 语法： v-on:事件名"内联语句" v-on:事件名"methods中的函数名" 注意：" v-on："可以替换为" " v-on:click"XXX" --> cli…...
Maven的生命周期与依赖作用域介绍
说明：本文介绍Maven的生命周期，以及在pom.xml文件中每个依赖（dependency标签内）scope标签的内容。 Maven生命周期 在IDEA项目中，右侧边栏，点Maven，可以看到以下生命周期。 其中， c…...
Django学习笔记四：urls配置详解
Django是一个高级的Python Web框架，它鼓励快速开发和干净、实用的设计。URL配置是Django框架中非常重要的一部分，它定义了URL模式与视图函数之间的映射关系。以下是Django URL配置的详解： URL配置文件 通常，URL配置位于Django项…...
NIO的callback调用方式
1.消费者 public class CallbackClient {public static void main(String[] args) {try {SocketChannel socketChannel SocketChannel.open();socketChannel.connect(new InetSocketAddress("127.0.0.1", 8000));ByteBuffer writeBuffer ByteBuffer.allocate(32);…...
百度文心智能体平台开发萌猫科研加油喵
百度文心智能体平台开发萌猫科研加油喵 在科研的道路上，研究生们常常面临着巨大的压力和挑战。为了给这个充满挑战的群体带来一些鼓励和温暖，我借助百度文心智能体平台开发了一个独特的智能体 《萌猫科研加油喵》。 一、百度文心智能体平台介绍 百度文…...
Hive数仓操作（十六）
DML（数据操作语言）指的是用于操作数据的 SQL 语言部分，主要包括对数据的插入、更新、删除等操作。Hive 的 DML语句主要包括 INSERT、UPDATE 和 DELETE 。以下是一些重要的 Hive DML 语句及其解析。 Hive的DML语句 一、 插入操作INSERT 一般…...
第十二届蓝桥杯嵌入式省赛程序设计题解析（基于HAL库）（第一套）
一.题目分析 （1）.题目 （2）.题目分析 1.串口功能分析 a.串口接收车辆出入信息：通过查询车库的车判断车辆是进入/出去 b.串口输出计费信息：输出编号，时长和费用 c.计算停车时长是难点&#x…...
MongoDB入门：安装及环境变量配置
一、安装MonggoDB Windows系统安装MongoDB 1、下载MongoDB安装包 访问MongoDB官方网站，选择与Windows系统相匹配的MongoDB Community Server版本进行下载。 Download MongoDB Community Server | MongoDB 2、安装MongoDB 双击下载好的安装包文件，根…...
)
利用 notepad++ 初步净化 HaE Linkfinder 规则所提取的内容(仅留下接口行)
去掉接口的带参部分 \?.*去掉文件行 .*\.(docx|doc|xlsx|xls|txt|xml|html|pdf|ppt|pptx|odt|ods|odp|rtf|md|epub|css|scss|less|sass|styl|png|jpg|jpeg|gif|svg|ico|bmp|tiff|webp|heic|dds|raw|vue|js|ts|mp4|avi|mov|wmv|mkv|flv|webm|mp3|wav|aac|flac|ogg|m4a).*(\r\…...
RCE（remote command/code execute）远程命令注入
远程命令注入RCE RCE(remote command/code execute，远程命令执行)漏洞，一般出现这种漏洞，是因为应用系统从设计上需要给用户提供指定的远程命令操作的接口，比如我们常见的路由器、防火墙、入侵检测等设备的web管理界面上。一般会给…...
一篇关于密码学的概念性文章
文章目录 1. 引言2. 加密学基本概念3. 加密算法的类型3.1 对称密钥加密（SKC）3.2 公钥密码学3.3 哈希函数3.4. 为什么需要三种加密技术？3.5 密钥长度的重要性4. 信任模型4.1 PGP信任网络4.2 Kerberos4.3 公钥证书和证书颁发机构4.4 总结5. 密码算法的实际应用5.1 密码保护5.2…...
什么是汽车中的SDK？
无论是在家里使用预制菜包做一顿大厨级别的晚餐，还是使用IKEA套组装配出时尚的北欧风桌子，我们都熟悉这样一种概念：比起完全从零开始，使用工具包可以帮助我们更快、更高效地完成一件事。 在速度至关重要的商业软件领域࿰…...
利用CRITIC客观权重赋权法进行数值评分计算——算法过程
1、概述 CRITIC客观评价法是一种基于指标的对比强度和指标之间的冲突性来确定指标客观权数的方法。 该方法适用于判断数据稳定性，并且适合分析指标或因素之间有着一定的关联的数据。 CRITIC方法的基本原理包括两个主要概念：对比强度和指标之间的…...
一个月学会Java 第4天 运算符和数据转换
Day4 运算符和数据转换 今天来讲运算符，每个运算符的作用和现象，首先我们先复习一下数据类型， day2讲过基本数据类型有八种，int、short、long、byte、char、boolean、float、double，分别为四个整型、一个字符型、一个布…...
Stream流的终结方法(一)
1.Stream流的终结方法 2.forEach 对于forEach方法，用来遍历stream流中的所有数据 package com.njau.d10_my_stream;import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.function.Consumer; import java.util…...
GO网络编程（二）：客户端与服务端通信【重要】
本节是新知识，偏应用，需要反复练习才能掌握。 目录 1.C/S通信示意图2.服务端通信3.客户端通信4.通信测试5.进阶练习：客户端之间通信 1.C/S通信示意图 客户端与服务端通信的模式也称作C/S模式，流程图如下 其中P是协程调度器。可…...
快速熟悉Nginx
一、Nginx是什么？ Nginx是一款高性能、轻量级的Web服务器和反向代理服务器。 特点：Nginx采用事件驱动的异步非阻塞处理框架，内存占用少，并发能力强，资源消耗低。功能：Nginx主要用作静态文件服…...
VikParuchuri/marker 学习简单总结
核心代码 VikParuchuri/marker 的核心是使用https://github.com/VikParuchuri/surya的 pdf 模型，注意不仅仅是ocr，在marker的代码里面有标注ocr 是option的。强制OCR 要设置:OCR_ALL_PAGES=true核心代码就是convert.py def convert_single_pdf(fname: str,model_lst: List,…...
【AI知识点】词嵌入（Word Embedding）
词嵌入（Word Embedding）是自然语言处理（NLP）中的一种技术，用于将词语或短语映射为具有固定维度的实数向量。这些向量（嵌入向量）能够捕捉词语之间的语义相似性，即将语义相近的词映射到…...
Python从入门到高手5.1节-Python简单数据类型
目录 5.1.1 理解数据类型 5.1.2 Python中的数据类型 5.1.3 Python简单数据类型 5.1.4 特殊的空类型 5.1.5 Python变量的类型 5.1.6 广州又开始变热 5.1.1 理解数据类型 数据类型是根据数据本身的性质和特征来对数据进行分类，例如奇数与偶数就是一种数据类型。…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
云原生玩法三问：构建自定义开发环境
云原生玩法三问：构建自定义开发环境 引言 临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。 运行设备的环境老，本地环境版本高，ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
C++.OpenGL （20/64）混合（Blending）
混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...