【vue-2】v-on、v-show、v-if及按键修饰符
目录
1、v-on事件
2、按键修饰符
3、显示和隐藏v-show
4、条件渲染v-if
1、v-on事件
创建button按钮有以下两种方式：
<button v-on:click="edit">修改</button><button @click="edit">修改</button>完整示例代码：
<!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 }}<h1>{{web.title}}</h1><h2>{{web.url}}</h2><h1>{{number}}</h1><button v-on:click="edit">修改</button></div><script type="module">import {createApp, reactive, ref} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项，用于设置响应式数据和方法等setup(){const number = ref(10)number.value = 20const web = reactive({title:"开始学习vue啦",url:"vue.com"})const edit = () =>{web.url = "hhahaha"}return{msg:"sucess",web,number,edit}}}).mount("#app")// mount为挂载</script>
</body>
</html>
另：=>是es6中的语法。
举例说明：
（x）=> x + 6
相当于
function(x){return x+6;
}2、按键修饰符
回车：
回车 <input type="text" @keyup.enter="add(20,50)"> <br>空格：
空格 <input type="text" @keyup.space="add(10,80)"> <br>Tab键：
Tab <input type="text" @keydown.tab="add(5,32)"> <br>按键盘w键：
w <input type="text" @keyup.w="add(8,3)"> <br>组合键：
Ctrl+Enter <input type="text" @keyup.ctrl.enter="add(20,50)"> <br>
Ctrl+A <input type="text" @keyup.ctrl.a="add(20,50)"> <br>完整示例代码：
<!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="vue.global.js"></script> -->
</head>
<body><div id="app"><!-- 插值表达式 -->{{ msg }}<h1>{{web.title}}</h1><h2>{{web.url}}</h2> <h2>{{web.user}}</h2>回车 <input type="text" @keyup.enter="add(20,50)"> <br>空格 <input type="text" @keyup.space="add(10,80)"> <br>Tab <input type="text" @keydown.tab="add(5,32)"> <br>w <input type="text" @keyup.w="add(8,3)"> <br><!-- 组合键 -->Ctrl+Enter <input type="text" @keyup.ctrl.enter="add(20,50)"> <br>Ctrl+A <input type="text" @keyup.ctrl.a="add(20,50)"> <br></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项，用于设置响应式数据和方法等setup(){const web = reactive({title:"开始学习vue啦",url:"vue.com",user:0})const add = (a,b) =>{web.user += a+b}return{msg:"sucess",web,add}}}).mount("#app")// mount为挂载</script>
</body>
</html>
3、显示和隐藏v-show
实现的功能：当web.title为False，隐藏内容；当为True，显示内容。
<!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="vue.global.js"></script> -->
</head>
<body><div id="app"><!-- 插值表达式 --><h1>{{web.title}}</h1><p v-show="web.title">显示的内容</p><button @click="show">切换显示状态</button></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项，用于设置响应式数据和方法等setup(){ const web = reactive({title:false})const show = () => {web.title = !web.title}return{web,show}}}).mount("#app")// mount为挂载</script>
</body>
</html> 
4、条件渲染v-if
通过v-if也可实现上述功能，当v-if为True，显示内容，当为False，则不显示，只需在上述代码添加以下一行代码即可。
<p v-if="web.title">v-if显示的内容</p>实现的功能：当web.user在不同数值段，显示不同的内容。
<!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="vue.global.js"></script> -->
</head>
<body><div id="app"><!-- 插值表达式 --><p v-if="web.user < 1000">user小于1000</p><p v-else-if="web.user > 1000 && web.user < 2000">user小于2000</p><p v-else>user大于2000</p></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项，用于设置响应式数据和方法等setup(){ const web = reactive({user:500})return{web }}}).mount("#app")// mount为挂载</script>
</body>
</html> 
相关文章：
【vue-2】v-on、v-show、v-if及按键修饰符
目录 1、v-on事件 2、按键修饰符 3、显示和隐藏v-show 4、条件渲染v-if 1、v-on事件 创建button按钮有以下两种方式： <button v-on:click"edit">修改</button> <button click"edit">修改</button> 完整示例代码…...
华为交换机基础实验----VLAN基础
交换机篇实验： 给交换机创建VLAN 1.单个VLAN的创建 [S]vlan 10 查看的方法：dis vlan 2.批量创建vlan的方法 Vlan b 20 30 40 连续创建三个vlan，分别为vlan20 vlan30和vlan40 [SONY-S1-vlan10]vlan b 20 30 40 3.批量创建连续的vlan…...
Vue3学习使用axios和qs进行POST请求和响应处理
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、前言1.准备工作2.发送POST请求3.处理响应数据4.总结 一、前言 在前端开发中，经常需要与后端进行数据交互，其中包括发送POST请求并处理响…...
张大哥笔记：赚钱高手养成计划---如何将一份时间产生N份收入？
我们常说的赚钱的四种境界有哪些？ 1.靠体力挣钱 2.靠技能挣钱 3.靠知识挣钱 4.靠平台钱生钱 所以对应的收入的模式就会是下面4种模式： 1.一份时间卖1次 2.一份时间卖N次 3.一份时间溢价卖N次 4.购买他人时间为自己所用 时间对于每个人都是相同的…...
excel里如何将数据分组转置？
这个表格怎样转换为下表？按照国家来分组，把不同年份对应的不同序列值进行转置？？ 这演示用数据透视表就完成这个数据转换。 1.创建数据透视表 选中数据中任意单元格，点击插入选项卡，数据透视表，…...
WHAT - 前端安全性测试和常见攻击手段
目录 一、安全性测试二、前端安全性测试三、跨站脚本（XSS）攻击1. 介绍2. 三大类型反射型 XSS（Reflected XSS）存储型 XSS（Stored XSS）DOM 型 XSS（DOM-based XSS） 3. xss 盲打4. xss 水…...
重量and体积，不要在傻傻的花冤枉钱寄快递了！
寄快递时有没有遇到过明明不重却被按体积收费的情况？别急，今天就来给大家揭秘快递收费的奥秘！ 实际重量和体积重量！ 首先，我们要明白两个概念：实际重量和体积重量。实际重量就是你看到的物品重量…...
docker ps显示的参数具体是什么意思
1，运行一个容器 docker run -d ubuntu:15.10 /bin/sh -c "while true; do echo hello world; sleep 1; done"这段命令的作用是使用 docker run 命令运行一个基于 ubuntu:15.10 镜像的 Docker 容器，并在容器中执行一个无限循环的命令。 具体解…...
【C++】多态：编程中的“一人千面”艺术
目录 一、多态的概念二、多态的定义及实现1.多态的构成条件2.虚函数的重写2.1 什么是虚函数？2.2 虚函数的重写是什么？2.3 虚函数重写的两个例外2.4 C11 override 和 final2.5 重载、覆盖(重写)、隐藏(重定义)的对比 三、抽象类3.1 概念3.2 接口继承和实现…...
【必备工具】gitee上传-保姆级教程
目录 1.gitee是什么 2.gitee怎么注册 编辑 3.gitee怎么提交代码 4.gitee的三板斧 Clone仓库 Q&A 1. Gitee 只有三板斧吗？ 2. Git 教了，Gitee 上没有绿点怎么办？ 3. 用户名和密码输入错误怎么办？ 4. 操作时不小心…...
P1115 最长子段和
题目描述 给出一个长度为 𝑛n 的序列 𝑎a，选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数，表示序列的长度 𝑛。 第二行有 𝑛n 个整数，第 𝑖 个整数表示序列的…...
02 FreeRTOS 任务
1、创建任务函数 1.1 动态内存的使用 在之前我们如果要创建一个与学生有关的任务，我们会定义： //打印50个学生的信息 char name[50][100]; int age[50]; int sex[50]; //1表示男，0表示女 int score[50]; 如果之后要对其进行修改会非常麻烦&…...
NSS题目练习4
[LitCTF 2023]1zjs 打开后是一个游戏，用dirsearch扫描，什么都没发现 查看源代码搜索flag，发现没有什么用 搜索php，访问 出现一堆符号，看样子像是jother编码 解码得到flag，要删掉[] [LitCTF 2023]Http pro …...
【算法】合并k个已排序的链表
✨题目链接： NC51 合并k个已排序的链表 ✨题目描述 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围：节点总数 0≤𝑛≤50000≤n≤5000，每个节点的val满足 ∣𝑣𝑎𝑙∣&…...
【Muduo】三大核心之EventLoop
Muduo网络库的EventLoop模块是网络编程框架中的核心组件，负责事件循环的驱动和管理。以下是对EventLoop模块的详细介绍： 作用与功能： EventLoop是网络服务器中负责循环的重要模块，它持续地监听、获取和处理各种事件，…...
ubuntu安装完桌面后如何启动
ubuntu安装完桌面后如何启动 在Ubuntu服务器上安装桌面环境后，您可以使用以下命令启动图形界面： sudo systemctl start gdm3如果您使用的是Ubuntu 20.04或更新版本，可能需要使用gdm3作为显示管理器。在早期的Ubuntu版本中，可能使…...
知识融合概述
文章目录 知识融合知识融合过程研究现状技术发展趋势 知识融合 知识融合的概念最早出现在1983年发表的文献中，并在20世纪九十年代得到研究者的广泛关注。而另一种知识融合的定义是指对来自多源的不同概念、上下文和不同表达等信息进行融合的过程认为知识融合的目标是…...
LIO-EKF: High Frequency LiDAR-Inertial Odometry using Extended Kalman Filters
一、论文摘要 里程计估计是每个需要在未知环境中导航的自主系统的关键要素。在现代移动机器人中，3D LiDAR 惯性系统通常用于执行此任务。通过融合 LiDAR 扫描和 IMU 测量，这些系统可以减少因顺序注册各个 LiDAR 扫描而引起的累积漂移，并提供稳…...
Shell脚本学习笔记(更新中...)
一、什么是shell shell的作用是： 解释执行用户输入的命令程序等。 用户输入一条命令，shell就解释一条。 键盘输入命令，LInux给与响应的方式，称之为交互式。 shell是一块包裹着系统核心的壳，处于操作系统的最外层&a…...
leetcode 210.课程表II
思路：拓补排序 其实就是对于第一个题的问题变了一个问法，上一个题本质上是求有没有环，这道题本质上就是让你求出来符合没有环的路径输出而已，本质上没有什么区别。 不同就在于这里需要你额外开一个数组用来存储你遍历这个有向图…...
【Appium 系列】第20节-测试项目结构设计 — 从脚本到工程
对应代码：配套代码/test/ 完整目录结构说明：本节讲解如何组织一个中大型 Appium 测试项目，从目录结构到文件职责，从脚本到工程的演进。这节讲什么测试项目从小到大会经历三个阶段：阶段 1：脚本阶段test_logi…...
【Appium 系列】第19节-Allure 报告与 Bug 管理 — 测试结果的可视化
对应代码：utils/allure_helper.py、utils/bug_reporter.py、utils/bug_allure_helper.py说明：本节代码来自一个真实的移动端自动化测试项目，已做模糊化处理，可直接复用。1. 为什么需要报告体系？测试跑完之后࿰…...
Gemini深度研究模式到底有多强？3个颠覆性实验结果揭示它如何重构科研工作流
更多请点击： https://kaifayun.com 第一章：Gemini深度研究模式到底有多强？3个颠覆性实验结果揭示它如何重构科研工作流 Gemini深度研究模式并非简单增强版对话功能，而是一套面向复杂知识任务的原生协同推理架构。其核心突破在于支…...
让你的电脑拥有AI大脑：UI-TARS桌面助手实战指南
让你的电脑拥有AI大脑：UI-TARS桌面助手实战指南 【免费下载链接】UI-TARS-desktop The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra 项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS-desktop 你是…...
为什么83%的AI Agent项目卡在POC阶段？——20年架构师拆解4层“隐性集成墙”及破壁工具链
更多请点击： https://kaifayun.com 第一章：为什么83%的AI Agent项目卡在POC阶段？——20年架构师拆解4层“隐性集成墙”及破壁工具链 当AI Agent从论文走向产线，真正的断崖不在模型能力，而在四堵看不见的“集成墙”&am…...
深入解析CPU L1/L2缓存：原理、性能影响与编程优化实战
1. 项目概述：从“快”字说起做性能调优或者写高性能代码的朋友，对“缓存”这个词一定不陌生。我们总在说，把数据放进缓存里，访问就快了。但缓存本身，尤其是离CPU核心最近的一级缓存（L1 Cache）和…...
Bebas Neue：现代几何字体的开源革命与专业应用指南
Bebas Neue：现代几何字体的开源革命与专业应用指南 【免费下载链接】Bebas-Neue Bebas Neue font 项目地址: https://gitcode.com/gh_mirrors/be/Bebas-Neue Bebas Neue 是一款备受全球设计师推崇的开源几何字体，以其简洁有力的线条和卓越的视觉冲…...
军队/军工场景对智能问数有什么特殊要求?
军队/军工场景对智能问数有什么特殊要求？从POC评测结果看技术路线的适配边界 截至2026年5月的行业实践表明，军队、军工场景是智能问数技术选型中复杂度最高、约束条件最多的领域之一。这类场景的核心特殊要求不在于某个单项能力，而在于系统能…...
终极指南：5步掌握.NET Core Mod加载器Reloaded-II的完整使用方法
终极指南：5步掌握.NET Core Mod加载器Reloaded-II的完整使用方法 【免费下载链接】Reloaded-II Universal .NET Core Powered Modding Framework for any Native Game X86, X64. 项目地址: https://gitcode.com/gh_mirrors/re/Reloaded-II 你是否厌倦了手动复…...
在多模型聚合调用中体验到的路由与失败切换流畅度
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 在多模型聚合调用中体验到的路由与失败切换流畅度 效果展示类，分享开发者在实际编程中，当配置了多个备用模…...