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

vue v-on 艾特@

news 2026/4/1 22:53:10

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

k8s中部署prometheus并监控k8s集群以及nginx案例

4台主机 node1主机&#xff1a;k8s集群中的master node2主机&#xff1a;搭建了harbor仓库&#xff0c;存储所需的docker镜像 test3、4主机&#xff1a;k8s集群中的woker 搭建prometheus https://github.com/prometheus-operator/kube-prometheus 获取prometheus压缩包的…...

编程新知 2026/4/1 22:43:33

Python高效开发技巧汇总

这是一篇关于Python开发的技术文章示例内容&#xff0c;可以替换为真实文章内容。...

编程新知 2026/4/1 21:20:28

智慧卤味，一码追溯：万界星空MES方案

一、行业痛点与MES目标1、主要痛点生产依赖经验&#xff1a;卤制时间、温度、配料比例依赖人工经验&#xff0c;产品口味和质量不稳定。追溯困难&#xff1a;一旦出现食品安全问题&#xff0c;难以快速精准追溯到问题源头&#xff08;原料批次、生产环节、操作人员等&#xff0…...

编程新知 2026/4/1 21:06:10

酒精测试仪

简 介&#xff1a; 本文介绍了一款酒精测试仪的使用方法。测试仪开机后需等待15秒预热&#xff08;数字倒计时&#xff09;&#xff0c;预热结束后对着吹气口吹气3秒即可显示测量结果。实验表明&#xff0c;该仪器灵敏度较高&#xff1a;直接吹气显示11左右&#xff0c;不吹气显…...

编程新知 2026/4/1 20:29:56

PyTorch 2.8深度学习镜像入门必看：RTX 4090D环境验证与快速上手步骤

PyTorch 2.8深度学习镜像入门必看&#xff1a;RTX 4090D环境验证与快速上手步骤 1. 镜像概述与核心优势 PyTorch 2.8深度学习镜像专为RTX 4090D显卡优化设计&#xff0c;提供开箱即用的深度学习开发环境。这个镜像最显著的特点是免去了复杂的环境配置过程&#xff0c;让开发者…...

编程新知 2026/4/1 19:33:10

终极Windows 11优化指南：Win11Debloat让你的系统重获新生

终极Windows 11优化指南&#xff1a;Win11Debloat让你的系统重获新生 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and…...

编程新知 2026/4/1 17:37:24

新手零障碍入门：在免激活的快马平台完成你的第一个Python小游戏

作为一个刚接触编程的新手&#xff0c;我最近在InsCode(快马)平台上完成了人生第一个Python小游戏——猜数字。整个过程比想象中简单得多&#xff0c;特别适合像我这样零基础的小白入门。下面分享我的学习笔记&#xff0c;希望能帮到同样想尝试编程的朋友。 为什么选择猜数字游…...

编程新知 2026/4/1 17:24:51

SlimSAS连接器在高密度存储系统中的关键应用与优化策略

1. SlimSAS连接器为何成为高密度存储的"黄金搭档"&#xff1f; 第一次接触SlimSAS连接器是在去年部署全闪存阵列时。当时机柜里密密麻麻的线缆让我头疼不已&#xff0c;直到工程师拿出这个火柴盒大小的连接器&#xff0c;我才意识到高密度布线的革命真的来了。SlimS…...

编程新知 2026/4/1 17:20:34

丹青幻境保姆级教程：LoRA卷轴版本管理与热更新机制在生产环境落地

丹青幻境保姆级教程&#xff1a;LoRA卷轴版本管理与热更新机制在生产环境落地 1. 项目背景与核心价值 丹青幻境是一款专为数字艺术创作者设计的AI绘画工具&#xff0c;它巧妙地将现代AI技术与传统东方美学相结合。与传统的技术工具不同&#xff0c;丹青幻境采用了宣纸质感界面…...

编程新知 2026/4/1 16:55:18

英雄联盟ChampR助手：5分钟快速上手，轻松获取专业出装符文

英雄联盟ChampR助手&#xff1a;5分钟快速上手&#xff0c;轻松获取专业出装符文 【免费下载链接】champ-r &#x1f436; Yet another League of Legends helper 项目地址: https://gitcode.com/gh_mirrors/ch/champ-r 还在为每次游戏都要手动查找英雄出装和符文而烦恼…...

编程新知 2026/4/1 16:06:35