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

【vue-2】v-on、v-show、v-if及按键修饰符

news 2026/2/8 17:56:19

目录

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按钮有以下两种方式&#xff1a; <button v-on:click"edit">修改</button> <button click"edit">修改</button> 完整示例代码…...

编程日记 2024/5/27 22:24:30

华为交换机基础实验----VLAN基础

交换机篇实验&#xff1a; 给交换机创建VLAN 1.单个VLAN的创建 [S]vlan 10 查看的方法&#xff1a;dis vlan 2.批量创建vlan的方法 Vlan b 20 30 40 连续创建三个vlan&#xff0c;分别为vlan20 vlan30和vlan40 [SONY-S1-vlan10]vlan b 20 30 40 3.批量创建连续的vlan&#xf…...

编程日记 2024/5/27 22:23:29

Vue3学习使用axios和qs进行POST请求和响应处理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、前言1.准备工作2.发送POST请求3.处理响应数据4.总结 一、前言 在前端开发中&#xff0c;经常需要与后端进行数据交互&#xff0c;其中包括发送POST请求并处理响…...

编程日记 2024/5/27 22:22:28

张大哥笔记：赚钱高手养成计划---如何将一份时间产生N份收入？

我们常说的赚钱的四种境界有哪些&#xff1f; 1.靠体力挣钱 2.靠技能挣钱 3.靠知识挣钱 4.靠平台钱生钱 所以对应的收入的模式就会是下面4种模式&#xff1a; 1.一份时间卖1次 2.一份时间卖N次 3.一份时间溢价卖N次 4.购买他人时间为自己所用 时间对于每个人都是相同的…...

编程日记 2024/5/27 22:21:26

excel里如何将数据分组转置？

这个表格怎样转换为下表&#xff1f;按照国家来分组&#xff0c;把不同年份对应的不同序列值进行转置&#xff1f;&#xff1f; 这演示用数据透视表就完成这个数据转换。 1.创建数据透视表 选中数据中任意单元格&#xff0c;点击插入选项卡&#xff0c;数据透视表&#xff0c;…...

编程日记 2024/5/27 22:20:25

WHAT - 前端安全性测试和常见攻击手段

目录 一、安全性测试二、前端安全性测试三、跨站脚本&#xff08;XSS&#xff09;攻击1. 介绍2. 三大类型反射型 XSS&#xff08;Reflected XSS&#xff09;存储型 XSS&#xff08;Stored XSS&#xff09;DOM 型 XSS&#xff08;DOM-based XSS&#xff09; 3. xss 盲打4. xss 水…...

编程日记 2024/5/27 22:19:24

重量and体积，不要在傻傻的花冤枉钱寄快递了！

寄快递时有没有遇到过明明不重却被按体积收费的情况&#xff1f;别急&#xff0c;今天就来给大家揭秘快递收费的奥秘&#xff01; 实际重量和体积重量&#xff01; 首先&#xff0c;我们要明白两个概念&#xff1a;实际重量和体积重量。实际重量就是你看到的物品重量&#xf…...

编程日记 2024/5/27 22:18:23

docker ps显示的参数具体是什么意思

1&#xff0c;运行一个容器 docker run -d ubuntu:15.10 /bin/sh -c "while true; do echo hello world; sleep 1; done"这段命令的作用是使用 docker run 命令运行一个基于 ubuntu:15.10 镜像的 Docker 容器&#xff0c;并在容器中执行一个无限循环的命令。 具体解…...

编程日记 2024/5/27 22:17:22

【C++】多态：编程中的“一人千面”艺术

目录 一、多态的概念二、多态的定义及实现1.多态的构成条件2.虚函数的重写2.1 什么是虚函数&#xff1f;2.2 虚函数的重写是什么&#xff1f;2.3 虚函数重写的两个例外2.4 C11 override 和 final2.5 重载、覆盖(重写)、隐藏(重定义)的对比 三、抽象类3.1 概念3.2 接口继承和实现…...

编程日记 2024/5/27 22:16:21

【必备工具】gitee上传-保姆级教程

目录 1.gitee是什么 2.gitee怎么注册 ​编辑 3.gitee怎么提交代码 4.gitee的三板斧 Clone仓库 Q&A 1. Gitee 只有三板斧吗&#xff1f; 2. Git 教了&#xff0c;Gitee 上没有绿点怎么办&#xff1f; 3. 用户名和密码输入错误怎么办&#xff1f; 4. 操作时不小心…...

编程日记 2024/5/27 22:15:20

P1115 最长子段和

题目描述 给出一个长度为 &#x1d45b;n 的序列 &#x1d44e;a&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 &#x1d45b;。 第二行有 &#x1d45b;n 个整数&#xff0c;第 &#x1d456; 个整数表示序列的…...

编程日记 2024/5/27 22:14:19

02 FreeRTOS 任务

1、创建任务函数 1.1 动态内存的使用 在之前我们如果要创建一个与学生有关的任务&#xff0c;我们会定义&#xff1a; //打印50个学生的信息 char name[50][100]; int age[50]; int sex[50]; //1表示男&#xff0c;0表示女 int score[50]; 如果之后要对其进行修改会非常麻烦&…...

编程日记 2024/5/27 22:13:17

NSS题目练习4

[LitCTF 2023]1zjs 打开后是一个游戏&#xff0c;用dirsearch扫描&#xff0c;什么都没发现 查看源代码搜索flag&#xff0c;发现没有什么用 搜索php&#xff0c;访问 出现一堆符号&#xff0c;看样子像是jother编码 解码得到flag&#xff0c;要删掉[] [LitCTF 2023]Http pro …...

编程日记 2024/5/27 22:11:15

【算法】合并k个已排序的链表

✨题目链接&#xff1a; NC51 合并k个已排序的链表 ✨题目描述 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围&#xff1a;节点总数 0≤&#x1d45b;≤50000≤n≤5000&#xff0c;每个节点的val满足 ∣&#x1d463;&#x1d44e;&#x1d459;∣&…...

编程日记 2024/5/27 22:10:14

【Muduo】三大核心之EventLoop

Muduo网络库的EventLoop模块是网络编程框架中的核心组件&#xff0c;负责事件循环的驱动和管理。以下是对EventLoop模块的详细介绍&#xff1a; 作用与功能&#xff1a; EventLoop是网络服务器中负责循环的重要模块&#xff0c;它持续地监听、获取和处理各种事件&#xff0c;…...

编程日记 2024/5/27 22:07:09

ubuntu安装完桌面后如何启动

ubuntu安装完桌面后如何启动 在Ubuntu服务器上安装桌面环境后&#xff0c;您可以使用以下命令启动图形界面&#xff1a; sudo systemctl start gdm3如果您使用的是Ubuntu 20.04或更新版本&#xff0c;可能需要使用gdm3作为显示管理器。在早期的Ubuntu版本中&#xff0c;可能使…...

编程日记 2024/5/27 22:05:07

知识融合概述

文章目录 知识融合知识融合过程研究现状技术发展趋势 知识融合 知识融合的概念最早出现在1983年发表的文献中&#xff0c;并在20世纪九十年代得到研究者的广泛关注。而另一种知识融合的定义是指对来自多源的不同概念、上下文和不同表达等信息进行融合的过程认为知识融合的目标是…...

编程日记 2024/5/27 22:03:04

LIO-EKF: High Frequency LiDAR-Inertial Odometry using Extended Kalman Filters

一、论文摘要 里程计估计是每个需要在未知环境中导航的自主系统的关键要素。在现代移动机器人中&#xff0c;3D LiDAR 惯性系统通常用于执行此任务。通过融合 LiDAR 扫描和 IMU 测量&#xff0c;这些系统可以减少因顺序注册各个 LiDAR 扫描而引起的累积漂移&#xff0c;并提供稳…...

编程日记 2024/5/27 22:02:03

Shell脚本学习笔记(更新中...)

一、什么是shell shell的作用是&#xff1a; 解释执行用户输入的命令程序等。 用户输入一条命令&#xff0c;shell就解释一条。 键盘输入命令&#xff0c;LInux给与响应的方式&#xff0c;称之为交互式。 shell是一块包裹着系统核心的壳&#xff0c;处于操作系统的最外层&a…...

编程日记 2024/5/27 22:01:01

leetcode 210.课程表II

思路&#xff1a;拓补排序 其实就是对于第一个题的问题变了一个问法&#xff0c;上一个题本质上是求有没有环&#xff0c;这道题本质上就是让你求出来符合没有环的路径输出而已&#xff0c;本质上没有什么区别。 不同就在于这里需要你额外开一个数组用来存储你遍历这个有向图…...

编程日记 2024/5/27 22:00:00

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/8 4:37:17

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2026/1/30 2:33:11

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2026/1/25 3:29:22