【Vue3入门1】02- Vue3的基本操作(上)
本文介绍vue3中的一些方法的操作。
目录
1. 绑定事件 v-on
2. 按键修饰符
3. 显示和隐藏 v-show
4. 条件渲染 v-if
5. 条件渲染if-else
1. 绑定事件 v-on
点击事件 v-on:click=" 发生事件 "
<body><div id="app">{{ msg }} <h2>{{ web.url }}</h2><h2>{{ web.user }}</h2><!-- 3.v-on 为button按钮绑定点击事件 --><!-- 4.当点击页面的按钮时，原网址就会进行修改并显示在页面上 --><button v-on:click="eidt">修改</button><br><!-- 5.v-on:的简写为 @ --><button @click="eidt">修改简写版</button></div><script type="module">// 以模块化开发为例import { createApp,reactive } from './vue.esm-browser.js'createApp({setup(){// 设置响应的数据和方法const web = reactive({url:'baidu.com',user: 0})// 1.定义一个web的方法来修改网站的网址const eidt = () => {web.url = 'www.baidu.com';}return {msg:'success', // 响应成功web, // 响应式数据// 2.方法添加至return语句来返回eidt}}}).mount("#app") // 将其挂载到 div#app 元素中</script>
</body>2. 按键修饰符
以按键 enter 为例
按下按键时 user 自动添加响应数量
<body><div id="app">{{ msg }} <h2>{{ web.url }}</h2><h2>{{ web.user }}</h2><button v-on:click="eidt">修改</button><br><button @click="eidt">修改简写版</button><hr><!-- 3.给add方法设置一个事件 当按下enter键并松开(keyup)时 调用add方法 通过return返回结果 --><input type="text" @keyup.enter = "add(40,60)"><!-- 4.按下文本框时 有焦点 有光标闪烁，此时再按下enter并松开才有效，不点击文本框无效 --></div><script type="module">// 以模块化开发为例import { createApp,reactive } from './vue.esm-browser.js'createApp({setup(){// 设置响应的数据和方法const web = reactive({url:'baidu.com',user: 0})// 1.设置一个add方法，来计算a,b两个网站新增的用户数const add = (a,b) => {web.user = a+b;}const eidt = () => {web.url = 'www.baidu.com';}return {msg:'success', // 响应成功web, // 响应式数据eidt,// 2.返回add方法add}}}).mount("#app") // 将其挂载到 div#app 元素中</script>
</body>此时按下按键enter，页面显示100，但是反复点击并松开enter一直是100不变
怎么样才能每松开一次enter就+100
可以直接在add方法中设置，每按一次在原先基础上 +100
const add = (a,b) => {web.user += a+b;
}除了回车外，还可以设置其他 比如：空格、Tab键、任意键、组合键
空格： <input type="text" @keyup.space="add(20, 30)"> <br>
Tab： <input type="text" @keydown.tab="add(10, 20)"> <br>
keydown原因：按下Tab后，光标会下移而不在本文本框内
任意键w： <input type="text" @keyup.w="add(5, 10)"> <br>
组合键：@keyup.X.Y=" 事件 "
Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>
Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)">
3. 显示和隐藏 v-show
<body><div id="app"><!-- 当前显示状态是true / false --><h3>{{ web.show }}</h3> <!-- 当前显示状态 --><!-- 6.标签p设置了v-show 来控制一段文字的显示状态 --><!-- 7.web.show代表布尔值 决定是否显示 --><p v-show="web.show">baidu.com</p><!-- 4.设置一个button来切换show，每次点击按钮后调用toggle方法 并将结果通过return返回给标签p --><!-- 5.可以打开控制台观察,点击按钮后给p标签添加了一个CSS属性 style="display:none;" 且同时web.show修改为flase --><button @click="toggle">点击切换显示状态</button></div><script type="module">// 模块化开发为例import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义一个reactive类型的响应数据const web = reactive({show: true // 布尔类型的show 初始为true})// 1.定义一个可以切换show状态的方法 toggleconst toggle = () => {web.show = !web.show // 2.将!show赋值给show 实现每次点击按钮都是之前状态的反状态}return {web,toggle // 3.返回toggle方法}}}).mount("#app")</script>
</body>4. 条件渲染 v-if
<body><div id="app"><!-- 当前显示状态是true / false --><h3>{{ web.show }}</h3> <p v-show="web.show">baidu.com</p><!-- 1.新增一个p标签 并添加 v-if--><!-- v-if是渲染条件,条件为true时渲染 false时不渲染 --><!-- 虽然v-if也可以切换显示状态 但是不适合频繁切换 --><!-- 可以F12发现,每次切换状态,会在DOM中添加或删除元素 --><p v-if="web.show">www.baidu.com</p><button @click="toggle">点击切换显示状态</button></div><script type="module">// 模块化开发为例import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义一个reactive类型的响应数据const web = reactive({show: true // 布尔类型的show 初始为true})// 可以切换show状态的方法 toggleconst toggle = () => {web.show = !web.show // 将!show赋值给show 实现每次点击按钮都是之前状态的反状态}return {web,toggle}}}).mount("#app")</script>
</body>5. 条件渲染if-else
其实就是各种条件判断来实现显示不同状态
<body><div id="app"><!-- 当前显示状态是true / false --><h3>{{ web.show }}</h3> <p v-show="web.show">baidu.com</p><p v-if="web.show">www.baidu.com</p><button @click="toggle">点击切换显示状态</button><!-- 下面是 if else 的应用 --><!-- 2.在页面定义一个新标签:新网站,并为其添加 v-if --><p v-if="web.user < 1000">新网站</p><!-- 当用户数小于1000时显示新网站 --><!-- 3.再定义一个新网站:优秀网站,条件为用户 [1000,10000) --><p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站</p><!-- 4.资深网站标签,条件为除了上述所有条件的其他条件 --><p v-else=></p></div><script type="module">// 模块化开发为例import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义一个reactive类型的响应数据const web = reactive({show: true, // 布尔类型的show 初始为true// 1.响应式数据添加一个元素 用户useruser: 500 // 初始为500})// 可以切换show状态的方法 toggleconst toggle = () => {web.show = !web.show // 将!show赋值给show 实现每次点击按钮都是之前状态的反状态}return {web,toggle}}}).mount("#app")</script>
</body>本文介绍vue3中的一些方法的操作。
相关文章：
)
【Vue3入门1】02- Vue3的基本操作(上)
本文介绍vue3中的一些方法的操作。 目录 1. 绑定事件 v-on 2. 按键修饰符 3. 显示和隐藏 v-show 4. 条件渲染 v-if 5. 条件渲染if-else 1. 绑定事件 v-on 点击事件 v-on:click" 发生事件 " <body><div id"app">{{ msg }} <h2&g…...
【C语言】多进程/多线程
【C语言】多进程/多线程 参考链接多进程/多线程服务器1. 多进程服务器2. 多线程服务器 结语参考链接 参考链接 c 中文网 菜鸟 c 多进程/多线程服务器 多进程和多线程是常用的并发编程技术。它们都允许程序同时执行多个任务，提高了系统的资源利用率和程序的运行效率…...
模糊数学 | 模型 / 集合 / 关系 / 矩阵
注：本文为来自 “模糊数学 | 模型及其应用” 相关文章合辑。 略作重排。 如有内容异常，请看原文。 模糊数学模型：隶属函数、模糊集合的表示方法、模糊关系、模糊矩阵 wamg 潇潇 于 2019-05-06 22:35:21 发布 1.1 模糊数学简介 1965 年&a…...
Browserlist 使用指南：应对浏览器兼容性问题的解决方案
前言 在前端开发中，我们经常需要处理各种不同的浏览器兼容性问题。每个浏览器的版本众多，处理这些问题可能会让人感到头疼。幸运的是，有一个名为 Browserlist 的工具可以大大简化这项工作。本文将介绍 Browserlist 的作用和使用方法…...
QinQ项展 VLAN 空间
随着以太网技术在网络中的大量部署，利用 VLAN 对用户进行隔离和标识受到很大限制。因为 IEEE802.1Q 中定义的 VLAN Tag 域只有 12 个比特，仅能表示 4096 个 VLAN，无法满足城域以太网中标识大量用户的需求，于是 QinQ 技术应运而生。…...
数据结构—树（java实现）
目录 一、树的基本概念1.树的术语2.常见的树结构 二、节点的定义三、有关树结构的操作1.按照数组构造平衡 二叉搜索树2.层序遍历树3.前、中、后序遍历树(1).前序遍历树(2).中序遍历树(3).后序遍历树(4).各种遍历的情况的效果对比 4.元素添加5.元素删除1.删除叶子节点2.删除单一…...
Unity射击游戏手榴弹笔记
数据 在物品系统增加一个新的物品类，手榴弹类，定义手榴弹依附物体的类、配表数据类、背包内物品数据类、新建配表、在背包增加手榴弹数组；手榴弹的预制体需要可拾取的、扔出的；背包界面增加背包内的手榴弹、场景里的手榴弹、别人…...
S32K144外设实验（七）：FTM输出多路互补带死区PWM
文章目录 1. 概述1.1 时钟系统1.2 实验目的2. 代码的配置2.1 时钟配置2.2 FTM模块配置2.3 输出引脚配置2.4 API函数调用1. 概述 互补对的PWM输出是很重要的外设功能，尤其应用再无刷电机的控制。 1.1 时钟系统 笔者再墨迹一遍时钟的设置，因为很重要。 FTM的CPU接口时钟为SY…...
SingleMod
SingleMod SingleMod是一种深度学习模型，专为利用纳米孔直接RNA测序（DRS）数据在单RNA分子中精确检测m6A修饰而设计。该模型通过深度多实例回归框架进行训练，能够充分利用广泛的甲基化率标签。SingleMod是一个通用框架，可轻松适配其他核酸修饰的检测模型训练。 注意： Si…...
[网鼎杯 2020 白虎组]PicDown1 [反弹shell] [敏感文件路径] [文件描述符]
常见读取路径 /etc/passwd一些用户和权限还有一些乱七八糟的 /proc/self/cmdline包含用于开始当前进程的命令 /proc/self/cwd/app.py当前工作目录的app.py /proc/self/environ包含了可用进程的环境变量 /proc/pid/exe 包含了正在进程中运行的程序链接； /proc/pid…...
单纯形法之大M法
1. 问题背景与标准化 在求解某些线性规划问题时，往往难以直接找到初始的基本可行解。特别是当约束中存在等式或 “≥” 类型的不等式时，我们需要引入人工变量来构造一个初始可行解。 考虑如下标准形式问题（假设为最大化问题）&am…...
各类神经网络学习：（四）RNN 循环神经网络（下集），pytorch 版的 RNN 代码编写
上一篇下一篇RNN（中集）待编写 代码详解 pytorch 官网主要有两个可调用的模块，分别是 nn.RNNCell 和 nn.RNN ，下面会进行详细讲解。 RNN 的同步多对多、多对一、一对多等等结构都是由这两个模块实现的，只需要将对输入…...
DeepSeek 发布DeepSeek-V3-0324 版本 前端与网页开发能力、推理与多任务能力提升
DeepSeek 发布 DeepSeek-V3-0324 版本 DeepSeek 发布 DeepSeek-V3-0324 版本，在其前代模型 DeepSeek-V3 的基础上进行了显著升级。 该模型专注于中文和多语言文本生成、推理、代码编写等综合能力的提升，支持 Function Calling（函数调用&…...
航班时间 | 第九届蓝桥杯省赛C++A组
小 h 前往美国参加了蓝桥杯国际赛。 小 h 的女朋友发现小 h 上午十点出发，上午十二点到达美国，于是感叹到“现在飞机飞得真快，两小时就能到美国了”。 小 hh 对超音速飞行感到十分恐惧。 仔细观察后发现飞机的起降时间都是当地时间。 由于…...
传输层安全协议 SSL/TLS 详细介绍
传输层安全性协议TLS及其前身安全套接层SSL是一种安全传输协议，目前TLS协议已成为互联网上保密通信的工业标准，在浏览器、邮箱、即时通信、VoIP等应用程序中得到广泛的应用。本文对SSL和TLS协议进行一个详细的介绍，以便于大家更直观的理解和认…...
编程实现自我指涉（self-reference）
从计算机的组成原理出发，编程实现自我指涉（self-reference）本质上是通过代码操纵代码，形成逻辑上的闭环。这种能力不仅是编程语言设计中的一个奇妙现象，更是计算理论、计算机架构、乃至哲学层面的一种深刻映射。让我们…...
CentOS8 安装 Docker-CE
如果之前安装过docker，请先卸载旧版本: yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine 安装所需的软件包: yum install -y yum-utils 添加软件源信息（设置存储库）…...
【Docker系列八】使用 Docker run 命令部署 Nginx
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
【单元测试】
一、框架 不同的编程语言有不同的测试框架，以下是一些常见的测试框架： 1）Java：JUnit、TestNG2）Python：unittest、pytest3）JavaScript：Jest、Mocha4）C#：NUni…...
【今日EDA行业分析】2025年3月24日
今日 EDA 行业分析：中国在全球格局下的奋进之路 一、引言 在半导体产业的精密体系中，EDA 软件宛如一颗璀璨的明珠，其重要性不言而喻。它不仅是集成电路设计的核心支撑，更是连接芯片设计、制造、封装与测试各环节的关键纽带。今天…...
基于 PHP 内置类及函数的免杀 WebShell
前言 PHP 作为广泛使用的服务端语言，其灵活的内置类（如 DOMDocument）和文件操作机制（.ini、.inc 的自动加载），为攻击者提供了天然的隐蔽通道。通过 动态函数拼接、反射调用、加密混淆 和 伪命名空间 等手法…...
鸿蒙移动应用开发--UI组件布局
实验要求： 制作一个B站视频卡片界面，大致如下图所示，要求应用到线性布局、层叠布局等相关课堂知识。背景图、logo及文本内容不限。 实验环境 ：DevEco Studio 实验过程： 步骤1：创建项目 1. 在您的开发环境…...
内核编程十二：打印内核态进程的属性
在Linux内核中，current 是一个宏，用于获取当前正在执行的进程的 task_struct 结构体指针。current 宏返回一个指向当前正在运行的进程的 task_struct 结构体的指针。通过这个指针，内核代码可以访问和修改当前进程的各种属性和状态。 打印单个…...
C++(16)—类和对象(下) ①再探构造函数
文章目录 一、构造函数初始化方式回顾二、初始化列表详解1. 初始化列表语法与特点2. 必须使用初始化列表的成员变量 三、初始化列表的底层机制四、最佳实践五、总结 一、构造函数初始化方式回顾 在C中，构造函数用于初始化对象的成员变量。传统的初始化方式是在构造…...
[新闻.AI]国产大模型新突破：阿里开源 Qwen2.5-VL-32B 与 DeepSeek 升级 V3 模型
（本文借助 Deepseek-R1 协助生成） 在2025年3月24日至25日的短短24小时内，中国AI领域迎来两大重磅开源更新：阿里通义千问团队发布多模态大模型Qwen2.5-VL-32B-Instruct，而DeepSeek则推出编程能力大幅提升的DeepSeek-V3…...
投sci论文自己查重方法
首先进入查重网站科研者之家-Home of Reasearchers 会看到里面有很多小工具（比较高级的是要付费的） 我们找到论文查重的小工具：论文查重——>英文论文自助查重系统 把论文上传...
数值分析作业插值法2
埃尔米特插值 不仅要求函数值重合，而且要求若干阶导数也重合，这种插值问题称为埃尔米特插值问题。 低次埃尔米特插值多项式 二点三次埃尔米特插值多项式 **问题描述：**给定区间 [ x 0 , x 1 ] [x_0, x_1] [x0,x1] 两端点的函数值与导数…...
宝塔docker flarum默认登录账号密码，crazymax/flarum镜像默认登录账号密码
docker flarum默认账号密码 刚创建完毕时的登录账号和密码都是flarum 来源说明 宝塔安装的这个1.8.5版本的docker flarum的版本是，用的是 Docker库 https://hub.docker.com/r/crazymax/flarum Github库 https://github.com/crazy-max/docker-flarum...
TailwindCSS安装教程（PostCSS）
#官方教程简直是一坨，自己跑ai查文章做出来的安装总结，作者开发环境为Vue2VueCLI# 本文为TailwindCSS3.4版本安装教程 1，安装tailwindcss3.4.1 npm install -D tailwindcss3.4.1 2, 初始化TailwindCSS配置文件 npx tailwindcss init 3&…...
电脑干货：万能驱动--EasyDrv8
目录 万能驱动EasyDrv8 功能介绍 主程序界面 驱动解压与安装 PE环境支持 系统部署环境 桌面环境一键解决方案 万能驱动8电脑版是由IT天空出品的一款智能识别电脑硬件并自动安装驱动的工具，一般又称为it天空万能驱动，万能驱动vip版，简称…...