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

vue-常用指令 | 常用指令的修饰符

article 2026/3/8 14:40:02

什么是vue指令

v-cloak

v-text

v-html

v-pre

v-show /v-if

v-else/v-else-if

v-on

v-bind

v-for

v-model

常用指令的修饰符

v-model 指令修饰符

事件修饰符

按键修饰符

什么是vue指令

指令就是带有 v- 前缀 的特殊属性，不同的属性对应不同的功能。

分类汇总

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

v-cloak

【作用】解决浏览器在加载页面时因存在时间差而产生的闪动问题
【原理】先隐藏元素挂载位置，处理好渲染后再显示最终的结果
【注意】需要与CSS规则一起使用

如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上（id="app"顶级的div上）。

<style>[v-cloak] {display: none;}
</style>

<div v-cloak>{{ message }}
</div

v-text

v-text：直接输出属性值，相当于 innerText。

【语法】hi，意思是将 username值渲染到 p 标签中

v-text 填充纯文本

相比插值表达式更加简洁

不存在插值表达式的闪动问题

v-html

v-html：解析标签型数据，相当于innerHTML。

【语法】hi，意思是将 showInfo值渲染到 p 标签中
使用该语法，会覆盖 p 标签原有内容
使用该语法，能够将HTML标签的样式呈现出来。

v-pre

v-pre指令用于跳过这个元素和它的子元素的编译过程。可以用于显示原始的Mustache标签。

【语法】{{ raw }} 通过v-pre指令，可以让span元素及其子元素跳过Vue的编译过程，从而显示原始的{{ raw }}内容。
跳过编译
显示原始内容

v-show /v-if

v-show

【语法】 v-show = “表达式” 表达式值为 true 显示， false 隐藏
【作用】控制元素显示隐藏
【原理】切换 display:none 控制显示隐藏
【场景】频繁切换显示隐藏的场景

v-if

【语法】 v-if= “表达式” 表达式值 true显示， false 隐藏
【作用】控制元素显示隐藏（条件渲染）
【原理】基于条件判断，是否创建或移除元素节点
【场景】要么显示，要么隐藏，不频繁切换的场景

v-else/v-else-if

【语法】 v-else v-else-if= “表达式”
【作用】辅助v-if 进行判断渲染
【注意】要紧挨着v-if使用

v-on

【语法】v-on:事件名='内联语句' v-on:事件名='methods中的函数名'
【作用】注册事件 = 添加监听 + 提供处理逻辑
【简写】@事件名（事件名：click、change、submit等等）

<body><div id="app"><!-- 内联语句 --><button @click="count--">-</button><span>{{ count }}</span><!-- methods中的函数 --><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">java</h1></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100.isShow: true},methods: {fn() { this.isShow = !this.isShow }}})</script>
</body>

v-bind

【语法】v-bind:属性名='表达式'
【作用】动态设置html标签——>src、url、title
【简写】:属性名='表达式'

v-bind对样式控制的增强

为了方便开发者进行样式控制，Vue 扩展了 v-bind 的语法，可以针对 class 类名和 style 行内样式进行控制。

【语法】 class=”对象/数组”

对象 →键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box" :class="{ 类名1:布尔值，类名2:布尔值}"></div>

使用场景：一个类名，来回的切换 (导航高亮切换)

数组 →数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box":class="[ 类名1，类名2，类名3 ]"></div>

适用场景：批量的添加或删除类

【语法】style="样式对象'

<diy class="box" style=" { csS属性名1: CSS属性值, CSS属性名2:CSS属性值 }" ></diV><div class="box" :style="width:'400px',height:'400px'}"></div>

v-for

【语法】v-for="(item,index)in 数组'
【作用】基于循环多次渲染整个元素——>可以是‘数组’、‘对象’、数字...
【参数】item是每一项、index是下标。
【注意】v-for中的key，给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

1.key 的值只能是字符串或数字类型。
2.key 的值必须具有唯一性。
3.推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)。

v-model

【语法】v-model='变量'
【作用】给 表单元素 使用，双向数据绑定→ 可以快速 获取或设置 表单元素内容

双向绑定

1、数据变化→ 视图自动更新

2、视图变化- 数据自动更新

常用指令的修饰符

v-model 指令修饰符

.number: 输入字符串转为有效的数字。
.trim: 输入首尾空格过滤。
.lazy: 取代 input 监听 change 事件。

<input v-model.number="age" type="number">   <!-- 将输入值转为数字 -->
<input v-model.trim="username">              <!-- 自动过滤首尾空格 -->
<input v-model.lazy="message">               <!-- 不是即时更新，而是在 change 事件后更新 -->

事件修饰符

.stop 修饰符：阻止事件冒泡。
在内层元素使用了 .stop 修饰符来阻止点击事件向外层元素进行冒泡，这样点击内层元素时就不会触发外层元素的点击事件。
.prevent 修饰符：阻止事件的默认行为。
在<a> 标签使用了 .prevent 修饰符，点击链接时会调用 noReload方法，同时也会阻止浏览器刷新页面的默认行为。
.capture 修饰符：使用事件捕获模式。
.capture修饰符来指示事件在捕获阶段处理，而不是冒泡阶段处理。
.self 修饰符：只有事件由当前元素自身触发时才会触发处理函数。
使用了 .self 修饰符来确保只有当点击当前元素自身时，才会触发事件处理函数。
.once 修饰符：事件只会触发一次。
使用了 .once 修饰符来确保事件只会在第一次触发时执行，之后的触发将被忽略。
.passive 修饰符：指示浏览器不要阻止事件的默认行为。
使用了 .passive 修饰符来告诉浏览器不要阻止默认行为，比如在事件处理函数中使用 event.preventDefault()。

鼠标事件修饰符

.left 修饰符：表示左键鼠标按钮。
.right 修饰符：表示右键鼠标按钮。
.middle 修饰符：表示中键（滚轮键）鼠标按钮。

<template><div><!-- .stop 修饰符示例：阻止事件冒泡 --><div @click="outerClick"><div @click.stop="innerClick">点击此区域，不会触发外层的点击事件</div></div><!-- .prevent 修饰符示例：阻止默认行为 --><a @click.prevent="noReload" href="https://www.example.com">点击将不会刷新页面</a><!-- .capture 修饰符示例：使用事件捕获模式 --><div @click.capture="captureClick">在事件捕获阶段处理事件</div><!-- .self 修饰符示例：只有事件由当前元素自身触发才会触发处理函数 --><div @click.self="selfClick">只有点击当前元素时才触发事件处理函数</div><!-- .once 修饰符示例：事件只会触发一次 --><button @click.once="onetimeClick">点击按钮，事件只会触发一次</button><!-- .passive 修饰符示例：指示浏览器不要阻止事件的默认行为 --><div @touchmove.passive="onTouchMove">触摸移动时不阻止默认行为</div></div>
</template><script>
export default {methods: {outerClick() {console.log('外层点击事件被触发');},innerClick() {console.log('内层点击事件被触发');},noReload() {console.log('链接被点击');},captureClick() {console.log('捕获阶段处理点击事件');},selfClick() {console.log('当前元素触发点击事件');},onetimeClick() {console.log('点击事件只触发一次');},onTouchMove(event) {console.log('触摸移动事件被触发');event.preventDefault();}}
};
</script>

按键修饰符

.enter 修饰符：当用户按下回车键时触发相应的事件处理函数。
.tab 修饰符：当用户按下 Tab 键时触发相应的事件处理函数。
.delete 修饰符：当用户按下 Delete 键时触发相应的事件处理函数。delete
.esc 修饰符：当用户按下 Esc 键时触发相应的事件处理函数。
.up 修饰符：当用户按下上箭头键时触发相应的事件处理函数。
.space 修饰符：当用户按下空格键时触发相应的事件处理函数。
.down 修饰符：当用户按下下箭头键时触发相应的事件处理函数。
.left 修饰符：当用户按下左箭头键时触发相应的事件处理函数。
.right 修饰符：当用户按下右箭头键时触发相应的事件处理函数。

<template><div><!-- 当用户按下回车键时触发事件处理函数 --><input @keyup.enter="onEnter"><!-- 当用户按下 Tab 键时触发事件处理函数 --><input @keyup.tab="onTab"><!-- 当用户按下 Delete 键时触发事件处理函数 --><input @keyup.delete="onDelete"><!-- 当用户按下 Esc 键时触发事件处理函数 --><input @keyup.esc="onEsc"><!-- 当用户按下上箭头键时触发事件处理函数 --><input @keyup.up="onUp"><!-- 当用户按下空格键时触发事件处理函数 --><input @keyup.space="onSpace"><!-- 当用户按下下箭头键时触发事件处理函数 --><input @keyup.down="onDown"><!-- 当用户按下左箭头键时触发事件处理函数 --><input @keyup.left="onLeft"><!-- 当用户按下右箭头键时触发事件处理函数 --><input @keyup.right="onRight"></div>
</template><script>
export default {methods: {onEnter() {console.log('Enter 键被按下');},onTab() {console.log('Tab 键被按下');},onDelete() {console.log('Delete 键被按下');},onEsc() {console.log('Esc 键被按下');},onUp() {console.log('上箭头键被按下');},onSpace() {console.log('空格键被按下');},onDown() {console.log('下箭头键被按下');},onLeft() {console.log('左箭头键被按下');},onRight() {console.log('右箭头键被按下');}}
};
</script>

vue-常用指令 | 常用指令的修饰符

目录什么是vue指令 v-cloak v-text v-html v-pre v-show /v-if v-else/v-else-if v-on v-bind v-for v-model 常用指令的修饰符 v-model 指令修饰符事件修饰符按键修饰符什么是vue指令指令就是带有 v- 前缀的特殊属性，不同的属性对应不…...

编程日记 2026/2/19 11:40:31

Git提交前时间检查

为了防止在本地看日志的时候，由于本地时间被修改，导致日志的时间存在非正确时间。通过以下脚本在提交前进行时间验证，只有是正确的时间才可以提交。使用方法如下： 复制如下脚本，命名为 pre-commit ，放到 …...

编程日记 2026/2/15 9:07:24

Linux调度器 --- 负载均衡的存在的问题

文章目录前言一、简介二、Linux 调度器2.1 在单核系统上，CFS 非常简单2.2 在多核系统上，CFS 变得非常复杂2.2.1 负载均衡算法2.2.2 优化措施三、Linux调度器负载均衡的存在的问题3.1 组负载不均衡问题（Group Imbalance Bug）3.2 …...

编程日记 2026/2/28 9:38:26

从零开始用AI开发游戏（三）背景故事

《迷域回响》背景故事第一章：失落的符文纪元在远古的“艾瑟兰”大陆，掌握空间魔法的「筑界者文明」曾建造了连通万界的回响迷宫——这座迷宫既是试炼场，也是囚笼。文明巅峰时期，筑界者将禁忌知识刻入虚空符文，嵌于…...

编程日记 2026/2/24 2:11:56

IXTUR气控永磁铁：以高精度气控和稳定磁场，为机器人应用提供稳定抓取力

在现代工业生产和物流领域，物料的抓取与搬运是影响生产效率和成本控制的重要环节。传统夹爪在面对不同材质、形状和重量的物体时，常常存在适应性差、抓取不稳定、操作复杂等问题，导致生产流程中频繁出现停机调整，增加了人工干预成…...

编程日记 2026/3/6 15:55:04

硬件驱动——51单片机：寄存器、LED、动态数码管

目录一、51单片机 1.寄存器二、LED点灯 1.原理 2.封装函数 3.顺序点灯 4.特定位点灯三、动态数码管 1.原理 2.封装函数 3.0~9跳变 4.顺序移位0~9跳变一、51单片机 1.寄存器 51单片机共40个引脚，其中P0,P1,P2,P3是四个有8引脚的寄存器&#xff0…...

编程日记 2026/2/28 21:37:08

2025 香港 Web3 嘉年华：全球 Web3 生态的年度盛会

自 2023 年首届香港 Web3 嘉年华成功举办以来，这一盛会已成为全球 Web3 领域规模最大、影响力最深远的行业活动之一。2025 年 4 月 6 日至 9 日，第三届香港 Web3 嘉年华将在香港盛大举行。本届活动由万向区块链实验室与 HashKey Group 联合主办、W3ME 承…...

编程日记 2026/3/7 22:59:23

【MySQL】多表查询（笛卡尔积现象，联合查询、内连接、左外连接、右外连接、子查询）-通过练习快速掌握法

在DQL的基础查询中，我们已经学过了多表查询的一种：联合查询（union）。本文我们将系统的讲解多表查询。笛卡尔积现象首先，我们想要查询emp表和stu表两个表，按照我们之前的知识栈，我们直接使用…...

编程日记 2026/3/4 23:27:52

Leetcode-132.Palindrome Partitioning II [C++][Java]

目录一、题目描述二、解题思路【C】【Java】 Leetcode-132.Palindrome Partitioning IIhttps://leetcode.com/problems/palindrome-partitioning-ii/description/132. 分割回文串 II - 力扣（LeetCode）132. 分割回文串 II - 给你一个字符串 s&…...

编程日记 2026/3/3 6:59:18

在 macOS 上优化 Vim 用于开发

简介这篇指南将带你通过一系列步骤，如何在 macOS 上优化 Vim，使其具备代码补全、语法高亮、代码格式化、代码片段管理、目录树等功能。此外，我们还会解决在安装过程中可能遇到的常见错误。 1. 安装必备工具在开始 Vim 配置之前&#xff…...

编程日记 2026/3/3 19:52:16

SOME/IP-SD -- 协议英文原文讲解8

前言 SOME/IP协议越来越多的用于汽车电子行业中，关于协议详细完全的中文资料却没有，所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块： 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 5.1.4.4 S…...

编程日记 2026/3/7 16:49:30

【Agent实战】货物上架位置推荐助手（RAG方式+结构化prompt（CoT）+API工具结合ChatGPT4o能力Agent项目实践）

本文原创作者：姚瑞南 AI-agent 大模型运营专家，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。（转载需经授权）目录结论效果图示 1.prompt 2. API工具封…...

编程日记 2026/3/8 7:36:10

Spring Boot使用线程池创建多线程

在 Spring Boot 2 中，可以使用 Autowired 注入线程池（ThreadPoolTaskExecutor 或 ExecutorService），从而管理线程的创建和执行。以下是使用 Autowired 方式注入线程池的完整示例。 1. 通过 Autowired 注入 ThreadPoolTaskExecuto…...

编程日记 2026/2/4 13:29:39

PyTorch 深度学习实战（11）：强化学习与深度 Q 网络（DQN）

在之前的文章中，我们介绍了神经网络、卷积神经网络（CNN）、循环神经网络（RNN）、Transformer 等多种深度学习模型，并应用于图像分类、文本分类、时间序列预测等任务。本文将介绍强化学习的基本概念&#xff0…...

编程日记 2026/3/2 13:25:45

在Eclipse 中使用 MyBatis 进行开发，通常需要以下步骤：

在Eclipse 中使用 MyBatis 进行开发，通常需要以下步骤： 1. 创建 Maven 项目首先，在 Eclipse 中创建一个 Maven 项目。如果你还没有安装 Maven 插件，可以通过 Eclipse Marketplace 安装 Maven 插件。打开 Eclipse，选…...

编程日记 2026/2/10 14:56:05

Python学习第十九天

Django-分页后端分页 Django提供了Paginator类来实现后端分页。Paginator类可以将一个查询集（QuerySet）分成多个页面，每个页面包含指定数量的对象。 from django.shortcuts import render, redirect, get_object_or_404 from .models impo…...

编程日记 2026/3/3 6:20:08

Adobe Premiere Pro2023配置要求

Windows 系统最低配置处理器：Intel 第六代或更新版本的 CPU，或 AMD Ryzen™ 1000 系列或更新版本的 CPU，需要支持 Advanced Vector Extensions 2（AVX2）。操作系统：Windows 10（64 位&#xff…...

编程日记 2026/2/22 1:39:06

面试求助：接口测试用例设计主要考虑哪些方面？

一、基础功能验证 1. 正常场景覆盖关键点：验证接口在合法输入下的正确响应（状态码、数据结构、业务逻辑）。案例： json 复制 // 用户登录接口输入：{"username": "合法用户", "password…...

编程日记 2026/1/26 5:41:09

C语言——变量与常量

C语言中的变量与常量：简洁易懂的指南在C语言编程中，变量和常量是最基本的概念之一。理解它们的区别和使用方法对于编写高效、可维护的代码至关重要。本文将详细介绍C语言中的变量和常量，并通过图表和代码示例帮助你更好地理解。目录什么…...

编程日记 2026/1/26 2:41:49

考研408-数据结构完整代码线性表的顺序存储结构 - 顺序表

线性表的顺序存储结构 - 顺序表 1. 顺序表的定义用一组地址连续的存储单元依次存储线性表的数据元素，从而使逻辑上相邻的两个元素在物理位置上也相邻 2. 顺序表的特点随机访问： 即通过首地址和元素序号可以在O(1) 时间内找到指定元素&#xff0…...

编程日记 2026/1/24 5:35:28

Windows环境下安装部署dzzoffice+onlyoffice的私有网盘和在线协同系统

安装前需要准备好Docker Desktop环境，可查看我的另一份亲测安装文章 https://blog.csdn.net/qq_43003203/article/details/146283915?spm1001.2014.3001.5501 1、安装配置onlyoffice 1、Docker 拉取onlyoffice容器镜像管理员身份运行Windows PowerShell&#x…...

编程日记 2026/3/7 6:17:29

解决 Docker 镜像拉取超时问题：配置国内镜像源

在使用 Docker 的过程中，经常会遇到镜像拉取超时的问题，尤其是在国内网络环境下。这不仅会浪费大量的时间，还可能导致一些项目无法顺利进行。今天，我将分享一个简单而有效的解决方法：配置国内镜像源。环境操作系统 c…...

编程日记 2026/1/30 1:34:48

如何解决 Three.js 物体渲染的锯齿问题

在 Three.js 中，如果模型看起来不够平滑，或者在旋转视角时出现锯齿（aliasing），可以通过以下方法来优化渲染效果。 1. 启用抗锯齿（MSAA） 默认情况下，Three.js 渲染器不会开启抗锯齿&…...

编程日记 2026/1/27 2:00:04

嵌入式八股，为什么单片机中不使用malloc函数

1. 资源限制单片机的内存资源通常非常有限，尤其是RAM的大小可能只有几KB到几十KB。在这种情况下，使用 malloc 进行动态内存分配可能会导致内存碎片化，使得程序在运行过程中逐渐耗尽可用内存。 2. 内存碎片问题 malloc 函数在分配和释放内…...

编程日记 2026/3/3 0:30:13

【计量地理学】实验一地理数据的基本统计分析

阅前提示： 计量地理学实验课的实验报告为当堂提交，相较以往实验报告缺少打磨与整理的时间，因此内容中不可避免出现相关错误！！！ 出于个人完美主义的原则本不愿发布（其实就是黑历史）…...

编程日记 2025/12/26 0:15:05

ChatPromptTemplate的使用

ChatPromptTemplate 是 LangChain 中专门用于管理多角色对话结构的提示词模板工具。它的核心价值在于，开发者可以预先定义不同类型的对话角色消息（如系统指令、用户提问、AI历史回复），并通过数据绑定动态生成完整对话上下文。 1.…...

编程日记 2026/3/4 1:41:48

SQL Server查询优化

最常用，最有效的数据库优化方式查询语句层面避免全表扫描使用索引：确保查询条件中的字段有索引。例如，查询语句 SELECT * FROM users WHERE age > 20，若 age 字段有索引，数据库会利用索引快速定位符合条件的记…...

编程日记 2026/3/2 17:43:43

Blender插件NodeWrangler导入贴图报错解决方法

Blender用NodeWrangler插件 CtrlShiftT 导入贴图直接报错解决方法: 用CtrlshiftT打开需要导入的材质文件夹时，右边有一个默认勾选的相对路径，取消勾选就可以了。开启node wrangler插件，然后在导入贴图是取消勾选"相对路径"&am…...

编程日记 2026/2/15 18:29:47

QT中的宏

Q_UNUSED(event); 是 Qt 提供的一个宏，用于标记某个变量或参数在当前作用域中未被使用。它的主要作用是避免编译器发出“未使用变量”的警告。背景在 C 中，如果一个函数参数或变量在代码中没有被使用，编译器会发出警告，例如&a…...

编程日记 2026/2/14 15:59:06

java项目之基于ssm的药店药品信息管理系统（源码+文档）

项目简介药店药品信息管理系统实现了以下功能： 个人信息管理负责管理个人用户的信息。员工管理负责管理药店或药品管理机构的员工信息。药品管理负责管理药品的详细信息，可能包括药品名称、成分、剂量、价格、库存等。进货管理负责管理药品…...

编程日记 2026/2/25 11:10:52

什么是vue指令

v-cloak

v-text

v-html

v-pre

v-show /v-if

v-else/v-else-if

v-on

v-bind

v-bind对样式控制的增强

v-for

v-model

常用指令的修饰符

v-model 指令修饰符

事件修饰符

按键修饰符

相关文章：