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

vue v-on 艾特@

news 2026/2/10 18:46:55

vue v-on

内联代码：

<!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"><button v-on:click="count++">+</button><div>{{ count }}</div><button @click="count--">-</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,}})</script></body></html>

运行效果
在这里插入图片描述

methods方法

<!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><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script><div id="app"><button @click="fn"> 切换显示 </button><p v-show='isShow'> Hello </p></div><script>const app = new Vue({el: '#app',data: {isShow: true,},methods: {fn() {this.isShow = !this.isShow;},}})</script></body></html>

在这里插入图片描述

带参数

<!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"><h3>小黑自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button><p>银行卡余额：{{ money }}元</p></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100,},methods: {buy(price) {this.money -= price},}})</script></body></html>

演示

在这里插入图片描述

相关文章：

vue v-on 艾特@

vue v-on 内联代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</titl…...

编程日记 2023/9/2 19:30:43

【Ajax】发送跨域的POST请求时，浏览器会先发送一次OPTIONS请求，然后才发送原本的POST请求

当发送跨域的POST请求时&#xff0c;浏览器会先发送一次OPTIONS请求&#xff0c;这是因为浏览器的同源策略。OPTIONS请求被称为预检请求(pre-flight request)&#xff0c;它是CORS(跨源资源共享)机制中的一部分。 预检请求的目的是为了确保实际请求&#xff08;例如POST、PUT等…...

编程日记 2023/9/2 19:29:42

np.numpy, np.reshape, np.cumsum方法速查

1 np.numpy() 创建一个数组 state[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15]] state2np.array(state) print(state) print(state2)[[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15]] [[ 1 2 3 4 5] [ 6 7 8 9 10] [11 12 13 14 15]] 2 np.reshape() 常用于矩阵规…...

编程日记 2023/9/2 19:28:41

七、Kafka-Kraft 模式

目录 7.1 Kafka-Kraft 架构7.2 Kafka-Kraft 集群部署 7.1 Kafka-Kraft 架构 左图为 Kafka 现有架构&#xff0c;元数据在 zookeeper 中&#xff0c;运行时动态选举 controller&#xff0c;由controller 进行 Kafka 集群管理 右图为 kraft 模式架构&#xff08;实验性&#xff…...

编程日记 2023/9/2 19:27:39

jvm开启远程调试功能；idea远程debug

概述 有时候一些问题本地调试无法复现&#xff0c;这个时候可以开启jvm的远程调试功能 jar包启动 jdk8 java -agentlib:jdwptransportdt_socket,address8787,servery,suspendn -jar xxx.jarjdk11/17 java -agentlib:jdwptransportdt_socket,address*:8787,servery,suspe…...

编程日记 2023/9/2 19:26:38

视频汇聚/视频云存储/视频监控管理平台EasyCVR视频平台添加萤火云设备的具体操作步骤

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/9/2 19:25:37

vue 加载图片不显示

解决vue加载图片不显示问题 加载图片前边加上require require通常用于引入静态资源&#xff0c;如图片、样式文件等。 navList: [{ title: "大盘行情", imgSrc: require ("../../public../../public/imgs/nav1.png") , linkto: "" },{ title: &q…...

编程日记 2023/9/2 19:24:36

Java for循环每次都通过list.size()和 string.length()获取大小性能

有人说在for循环之前用一个局部变量先获取到list.size()、str.length()&#xff0c;然后在for循环的判断条件里通过这个局部变量替换list.size()、str.length()会节省数据计算的时间。事实真的是这样吗&#xff1f;下面就为大家解答这个问题。 说明&#xff1a;此文章针对Andro…...

编程日记 2023/9/2 19:23:34

面试题 08.01. 三步问题

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;面试题 08.01. 三步问题 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 动态规划。1 阶楼梯 1 种走法&#xff0c;2 阶楼梯 2 种走法&#xff0c;3 阶楼梯 6 种类走法。假设有 n(n>3) 阶…...

编程日记 2023/9/2 19:22:33

springboot添加SSL证书，支持https与http

文章目录 一、添加ssl证书二、配置文件三、配置同时支持HTTPS与HTTP四、启动 一、添加ssl证书 将证书文件放在/resource目录下 二、配置文件 修改配置文件 server:ssl:# 指定保存SSL证书的秘钥存储的路径key-store: classpath:dev.cobona.cn.pfx# 访问秘钥存储的密码key-store-…...

编程日记 2023/9/2 19:21:32

【AI】《动手学-深度学习-PyTorch版》笔记（二十）：图像增强、微调

AI学习目录汇总 1、图像增强 图像增强可以扩展训练样本数量、减小对某个属性的依赖。比如，裁剪图像，可以减少模型对对象出现位置的依赖；调整亮度、颜色等因素来降低模型对颜色的敏感度等 1.1、准备工作 头文件 %matplotlib inline：图表直接嵌入到Notebook中，本人使用的…...

编程日记 2023/9/2 19:20:31

Vulnhub: Ragnar Lothbrok: 1靶机

kali&#xff1a;192.168.111.111 靶机&#xff1a;192.168.111.226 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.226 作者提示修改hosts文件 目录爆破 gobuster dir -u http://armbjorn -w /usr/share/wordlists/dirbuster/directory-l…...

编程日记 2023/9/2 19:19:29

Ubuntu 20.04 Server配置网络

0&#xff0c;环境 服务器&#xff1a; Intel(R) Xeon(R) Gold 6248R CPU 3.00GHz 96核 网卡&#xff1a; 多网卡 1&#xff0c; 镜像下载 http://old-releases.ubuntu.com/releases/ubuntu-20.04.1-desktop-amd64.iso 2&#xff0c; 系统安装--具体步骤就不贴出来&#…...

编程日记 2023/9/2 19:18:27

jmeter 线程组

在jmeter中&#xff0c;通过指定并发数量、启动延迟时间和持续时间&#xff0c;并组织示例&#xff08;Samplers&#xff09;在多个线程之间的执行方式&#xff0c;实现模拟并发用户的行为。 添加线程组&#xff1a; 在测试计划中&#xff0c;右键点击“添加” -> “Thread…...

编程日记 2023/9/2 19:16:21

springboot集成logback

1、引入maven依赖 <!--logback日志--><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><version>1.2.3</version></dependency>2、再resource下面新建一个文件名称为 logback-s…...

编程日记 2023/9/2 19:15:18

【从互联网商业思维的角度分析商业模式在国内各大互联网产品的运用】

随着互联网技术的不断进步&#xff0c;互联网商业模式也在不断变化&#xff0c;各个互联网企业都在不断尝试各种商业模式&#xff0c;以满足不同消费者群体的需求&#xff0c;提高企业营销效益&#xff0c;下面我们将从互联网商业思维的角度&#xff0c;分析一下商业模式在国内…...

编程日记 2023/9/2 19:14:14

Leetcode394 字符串解码

思路&#xff1a;类似于入栈出栈的操作&#xff0c;分层保存数字和字符串&#xff0c;然后逐层相乘合并&#xff0c;通过判断当前字符和上一个字符类型来确定数字是否结束 class Solution:def decodeString(self, s: str) -> str:current_str [""]current_num[]…...

编程日记 2023/9/2 19:13:13

git学习笔记 | 版本管理 - 分支管理

文章目录 git学习笔记Git是什么仓库常见的命令commit 备注规范在文件下设置git忽略文件 .gitignore 版本管理git log | git reflog 查看提交日志/历史版本版本穿梭 git resetgit reset HEAD <file> git checkout -- fileName 丢弃工作区的修改git revertGit恢复之前版本的…...

编程日记 2023/9/2 19:12:12

pytest---添加自定义命令行参数（pytest_addoption ）

前言 在目前互联网公司中&#xff0c;都会存在多个测试环境&#xff0c;那么当我们编写的自动化想要在多套测试环境下进行运行时&#xff0c;如何使用&#xff1f;大多数人想到的可能是通过将我们自动化代码中的地址修改成不同环境&#xff0c;但是这时候就会增加一些工作量&am…...

编程日记 2023/9/2 19:11:11

Flutter开发- iOS 问题CocoaPods not installed or not in valid state

解决问题方案&#xff1a; 1、先检查本机CocoaPods是否安装&#xff0c;通过gem list 查看是否安装 打开终端&#xff0c;执行gem list&#xff0c;出现图中的数据即为已安装。未安装看第4 步 2、已经安装了CocoaPods&#xff0c;还出现了图中的提示&#xff0c;你可能已经猜…...

编程日记 2023/9/2 19:10:10

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2026/2/10 8:01:46

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/2/7 5:16:05

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57