vue v-on 艾特@

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>

演示

在这里插入图片描述

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

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

相关文章

centos7下docker设置新的下载镜像源并调整存放docker下载镜像的仓库位置

目录 1.设置镜像源 2.调整存放下载镜像的仓库位置 1.设置镜像源 在 /etc/docker下创建一个daemon.json文件。在json中下入 "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"] 完成配置 加载配置 systemctl daemon-reload 重启docker sy…

HarmonyOS/OpenHarmony(Stage模型)应用开发单一手势(二)

三、拖动手势&#xff08;PanGesture&#xff09; .PanGestureOptions(value?:{ fingers?:number; direction?:PanDirection; distance?:number}) 拖动手势用于触发拖动手势事件&#xff0c;滑动达到最小滑动距离&#xff08;默认值为5vp&#xff09;时拖动手势识别成功&am…

开发前期准备工作

开发前期准备工作 文章目录 开发前期准备工作0 代码规范0.1 强制0.2 推荐0.3 参考dao&#xff1a;跟数据库打交道service&#xff1a;业务层&#xff0c;人类思维解决controller&#xff1a;抽象化 0.4 注释规范0.5 日志规范0.6 专有名词0.7 控制层统一异常统一结构体控制层提示…

NSSCTF web 刷题记录1

文章目录 前言题目[GXYCTF 2019]禁止套娃方法一方法二 [NCTF 2019]Fake XML cookbook[NSSRound#7 Team]ec_RCE[NCTF 2018]Flask PLUS 前言 今天是2023.9.3&#xff0c;大二开学前的最后一天。老实说ctf的功力还是不太够做的题目太少&#xff0c;新学期新气象。不可急于求成&am…

宝塔面板定时监控和重启MySQL数据库(计划任务)

往期教程 如果还有不了解宝塔面板怎么使用的小伙伴&#xff0c;可以看下我总结的系列教程&#xff0c;保证从新手变老鸟&#xff1a; 【建站流程科普】 个人和企业搭建网站基本流程及六个主要步骤常见的VPS主机运维面板汇总—网站运维面板云服务器&#xff0c;VPS&#xff0…

SVN基本使用笔记——广州云科

简介 SVN是什么? 代码版本管理工具 它能记住你每次的修改 查看所有的修改记录 恢复到任何历史版本 恢复己经删除的文件 SVN跟Git比&#xff0c;有什么优势 使用简单&#xff0c;上手快 目录级权限控制&#xff0c;企业安全必备 子目录Checkout&#xff0c;减少不必要的文件检出…

使用Dbeaver连接GaussDB

1.下载DBeaver&#xff0c;官网地址 2.安装软件&#xff0c;打开软件&#xff0c;点击数据库->驱动管理器&#xff0c;具体操作如下图&#xff1a; 3、选择新建后进行参数设置&#xff0c;如下图&#xff1a; 具体参数如下图 驱动名称: GS #随便定义 驱动类型&#…

冠达管理:上市破发是什么意思?

随着股票商场的开展&#xff0c;一些公司开端考虑走向上市&#xff0c;以取得更多的资金和更高的知名度。然而&#xff0c;上市并不总是一件功德。当一家公司的股票开端买卖时&#xff0c;如果它的股价远低于发行价&#xff0c;就可以说它遭遇了“破发”。这是一种负面事件&…

vue3 判断包含某个字符

<img v-if"node.level 1 && checkIfIncludeSubStr(node.label, 人口)"src"/assets/images/icon-convention-01.png" width"16"class"inlineBlock Vmiddle" style"margin-right: 8px;"/>const data reactive…

【校招VIP】前端专业课考点之CSMA/CD协议

考点介绍&#xff1a; CSMA/CD&#xff0c;载波监听多点接入/碰撞检测&#xff0c;是广播型信道中采用一种随机访问技术的竞争型访问方法&#xff0c;具有多目标地址的特点。它通过边发送数据边监听线路的方法来尽可能减少数据碰撞与冲突。采用分布式控制方法&#xff0c;所有结…

哈夫曼编码实现文件的压缩和解压

程序示例精选 哈夫曼编码实现文件的压缩和解压 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《哈夫曼编码实现文件的压缩和解压》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0…

Nomad 系列-安装

系列文章 Nomad 系列文章 Nomad 简介 开新坑&#xff01;近期算是把自己的家庭实验室环境初步搞好了&#xff0c;终于可以开始进入正题研究了。 首先开始的是 HashiCorp Nomad 系列&#xff0c;欢迎阅读。 关于 Nomad 的简介&#xff0c;之前在 大规模 IoT 边缘容器集群管…

Linux的命令

Linux的命令分为四个类型&#xff1a;文件操作命令、系统操作命令、文本处理命令和网络操作命令。下面简单介绍一下常用的Linux命令&#xff1a; 文件操作命令 ls&#xff1a;列出目录下的所有文件和目录。 cd&#xff1a;切换当前目录。 mkdir&#xff1a;创建一个新目录。…

Git小白入门——上手实操之创建仓库和代码提交

版本库 什么是版本库呢&#xff1f;版本库又名仓库&#xff0c;英文名repository&#xff0c;简单理解成一个目录&#xff0c;目录里的所有文件都可以被Git管理&#xff0c;每个文件的修改、删除&#xff0c;Git都能跟踪&#xff0c;以便任何时刻都可以追踪历史&#xff0c;或…

arcpy实现kml批量转出为shp 包括shp合并

# -*- coding: utf-8 -*- import sys sys.path.append("D:\\Python27\\ArcGIS10.4\\python") sys.path.append("D:\\Program Files (x86)\\ArcGIS\\Desktop10.4\\arcpy\\arcpy") import arcpy, os# Set workspace (where all the KMLs are) 放kml文件的文件…

docker安装redis实操记录

1.Docker拉取镜像 docker pull redis2.Docker挂载配置文件 创建挂载文件夹 mkdir -p /home/redis/data下载默认配置文件 redis.conf 3.启动redis 容器 docker run --restartalways --log-opt max-size100m --log-opt max-file2 -p 6379:6379 --name redis -v /home/redi…

Qt鼠标点击事件处理:按Escape键退出程序

创建项目 Qt 入门实战教程&#xff08;目录&#xff09; 首先&#xff0c;创建一个名称为QtKeyEscape的Qt默认的窗口程序。 参考 &#xff1a;Qt Creator 创建 Qt 默认窗口程序 Qt响应键盘Escape事件 打开Qt Creator >>编辑 >> 项目 >> Headers>> …

Java版企业工程项目管理系统源码+java版本+项目模块功能清单+spring cloud +spring boot

工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…

Java“牵手”京东商品价格数据,京东商品历史价格数据接口,京东API接口申请指南

京东平台商品历史价格接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取京东商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片&#xff0c;历史价格&#xff0c;现在的价格等详细信息 。 获取商品价格接口API是一种用于获…

How to clean up Graylog Default index set log

一、前言: Graylog 满了,没有自动清理 挤爆硬盘空间,手动清理流程: 二、问题描述: Elasticsearch nodes disk usage above high watermark (triggered a few seconds ago)mree are ast search modes i the use wtm a mos mo re disk ther dsk s saoe me e waemak f ths…