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

Vue中常用指令

news 2026/3/31 20:18:04

一、内容渲染指令

        1.v-text：操作纯文本，用于更新标签包含的文本，但是使用不灵活，无法拼接字符串，会覆盖文本，可以简写为{{}}，{{}}支持逻辑运算。

用法示例：

//把name对应的值渲染到第一个标签中
<p v-text="name"></p>
<p>{{name}}</p>

        2.v-html：用于操作html标签，会将其当html标签解析后输出

<body><div id="app"><p v-html="name"></p></div><script type="text/javascript">let app=new Vue({el:"#app",data:{name:"<strong>Zhangsan</strong>"}           })</script>
</body>

二、属性绑定指令

        1.v-bind：动态属性绑定，属性值可以是src，title，class，href等，bind的属性对应data中的变量，简写是:

用法示例

<el-form v-bind:model="dataForm"></el-form>
<el-form :model="dataForm"></el-form>

三、事件绑定指令

        1.v-on：可以绑定事件的监听器,简写是@

用法示例：

<button @click="add"></button>

四、双向绑定指令

        1.v-model：通常用于表单的组件绑定，例如input、select等。它用于实现表单组件的双向绑定，表单控制件以外的标签没有用

用法示例：

<el-form-item label="姓名" prop="name"  }"><el-input v-model="dataForm.name"  placeholder="输入姓名" clearable ></el-input>
</el-form-item>

五、条件渲染指令

        1.v-show：指令的取值为true/false，分别对应着显示/隐藏。原理：动态为元素添加或移除 display：none样式，来实现元素的显示和隐藏；如果要频繁的切换元素的显示状态，用v-show会更好 。

        2.v-if：取值为true/false，控制元素是否需要被渲染(展示)。原理：每次动态创建或移除元素，实现元素的显示和隐藏；如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好。

        3.v-else：和v-if指令搭配使用，没有对应的值，当v-if的值为false时，v-else才会被渲染出来。

v-if可以单独使用，或者配合v-else指令一起使用：
<div v-if="Math.random()>10">随机数大于10
</div>
<div v-else>随机数小于10
</div>

注意：v-else指令配合v-if使用才会被识别。

相关文章：

Vue中常用指令

一、内容渲染指令 1.v-text&#xff1a;操作纯文本&#xff0c;用于更新标签包含的文本&#xff0c;但是使用不灵活&#xff0c;无法拼接字符串&#xff0c;会覆盖文本&#xff0c;可以简写为{{}}&#xff0c;{{}}支持逻辑运算。 用法示例&#xff1a; //把name对应的值渲染到…...

编程日记 2025/1/4 14:26:11

Servlet解析

概念 Servlet是运行在服务端的小程序&#xff08;Server Applet)&#xff0c;可以处理客户端的请求并返回响应&#xff0c;主要用于构建动态的Web应用&#xff0c;是SpringMVC的基础。 生命周期 加载和初始化 默认在客户端第一次请求加载到容器中&#xff0c;通过反射实例化…...

编程日记 2025/1/4 14:25:10

带虚继承的类对象模型

文章目录 1、代码2、 单个虚继承3、vbptr是什么4、虚继承的多继承 1、代码 #include<iostream> using namespace std;class Base { public:int ma; };class Derive1 :virtual public Base { public:int mb; };class Derive2 :public Base { public:int mc; };class Deri…...

编程日记 2025/1/4 14:24:05

深度学习中的离群值

文章目录 深度学习中有离群值吗&#xff1f;深度学习中的离群值来源&#xff1a;处理离群值的策略&#xff1a;1. 数据预处理阶段&#xff1a;2. 数据增强和鲁棒模型&#xff1a;3. 模型训练阶段&#xff1a;4. 异常检测集成模型&#xff1a; 如何处理对抗样本&#xff1f;总结…...

编程日记 2025/1/4 14:21:02

如何利用Logo设计免费生成器创建专业级Logo

在当今的商业世界中&#xff0c;一个好的Logo是品牌身份的象征&#xff0c;它承载着公司的形象与理念。设计一个专业级的Logo不再需要花费大量的金钱和时间&#xff0c;尤其是当我们拥有Logo设计免费生成器这样的工具时。接下来&#xff0c;让我们深入探讨如何利用这些工具来创…...

编程日记 2025/1/4 14:17:57

Mysql SQL 超实用的7个日期算术运算实例（10k）

文章目录 前言1. 加上或减去若干天、若干月或若干年基本语法使用场景注意事项运用实例分析说明2. 确定两个日期相差多少天基本语法使用场景注意事项运用实例分析说明3. 确定两个日期之间有多少个工作日基本语法使用场景注意事项运用实例分析说明4. 确定两个日期相隔多少个月或多…...

编程日记 2025/1/4 14:15:53

运算指令（PLC）

加 ADD 减 SUB 乘 MUL 除 DIV 浮点运算 整数运算...

编程日记 2025/1/4 14:12:44

「Mac畅玩鸿蒙与硬件49」UI互动应用篇26 - 数字填色游戏

本篇教程将带你实现一个数字填色小游戏&#xff0c;通过简单的交互逻辑&#xff0c;学习如何使用鸿蒙开发组件创建趣味性强的应用。 关键词 UI互动应用数字填色动态交互逻辑判断游戏开发 一、功能说明 数字填色小游戏包含以下功能&#xff1a; 数字选择&#xff1a;用户点击…...

编程日记 2025/1/4 14:06:38

机器学习经典算法——逻辑回归

目录 算法介绍 算法概念 算法的优缺点 LogisticRegression()函数理解 环境准备 算法练习 算法介绍 算法概念 逻辑回归&#xff08;Logistic Regression&#xff09;是一种广泛应用于分类问题的机器学习算法。 它基于线性回归的思想&#xff0c;但通过引入一个逻辑函数&…...

编程日记 2025/1/4 14:03:29

【数据仓库金典面试题】—— 包含详细解答

大家好&#xff0c;我是摇光~&#xff0c;用大白话讲解所有你难懂的知识点 该篇面试题主要针对面试涉及到数据仓库的数据岗位。 以下都是经典的关于数据仓库的问题&#xff0c;希望对大家面试有用~ 1、什么是数据仓库&#xff1f;它与传统数据库有何区别&#xff1f; 数据仓库…...

编程日记 2025/1/4 14:01:26

【UE5 C++课程系列笔记】19——通过GConfig读写.ini文件

步骤 1. 新建一个Actor类&#xff0c;这里命名为“INIActor” 2. 新建一个配置文件“Test.ini” 添加一个自定义配置项 3. 接下来我们在“INIActor”类中获取并修改“CustomInt”的值。这里定义一个方法“GetINIVariable” 方法实现如下&#xff0c;其中第16行代码用于构建配…...

编程日记 2025/1/4 13:57:21

JS 中 json数据 与 base64、ArrayBuffer之间转换

JS 中 json数据 与 base64、ArrayBuffer之间转换 json 字符串进行 base64 编码 function jsonToBase64(json) {return Buffer.from(json).toString(base64); }base64 字符串转为 json 字符串 function base64ToJson(base64) {try {const binaryString atob(base64);const js…...

编程日记 2025/1/4 13:56:19

USB 驱动开发 --- Gadget 驱动框架梳理

编译链接 #----》 linux_5.10/drivers/usb/gadget/Makefileobj-$(CONFIG_USB_LIBCOMPOSITE) libcomposite.o libcomposite-y : usbstring.o config.o epautoconf.o libcomposite-y composite.o functions.o configfs.o u_f.oobj-$(CONFIG_USB_GADG…...

编程日记 2025/1/4 13:54:16

细说STM32F407单片机中断方式CAN通信

目录 一、工程配置 1、时钟、DEBUG、USART6、GPIO、CodeGenerator 2、CAN1 3、NVIC 二、软件设计 1、KEYLED 2、can.h 3、can.c &#xff08;1&#xff09;CAN1中断初始化 &#xff08;2&#xff09;RNG初始化和随机数产生 &#xff08;3&#xff09; 筛选器组设置…...

编程日记 2025/1/4 13:53:15

Python应用指南：高德交通态势数据

在现代城市的脉络中&#xff0c;交通流量如同流动的血液&#xff0c;交通流量的动态变化对出行规划和城市管理提出了更高的要求。为了应对这一挑战&#xff0c;高德地图推出了交通态势查询API&#xff0c;旨在为开发者提供一个强大的工具&#xff0c;用于实时获取指定区域或道路…...

编程日记 2025/1/4 13:51:13

医学图像分析工具01：FreeSurfer || Recon -all 全流程MRI皮质表面重建

FreeSurfer是什么 FreeSurfer 是一个功能强大的神经影像学分析软件包&#xff0c;广泛用于处理和可视化大脑的横断面和纵向研究数据。该软件由马萨诸塞州总医院的Martinos生物医学成像中心的计算神经影像实验室开发&#xff0c;旨在为神经科学研究人员提供一个高效、精确的数据…...

编程日记 2025/1/4 13:49:11

.NET框架用C#实现PDF转HTML

HTML作为一种开放标准的网页标记语言&#xff0c;具有跨平台、易于浏览和搜索引擎友好的特性&#xff0c;使得内容能够在多种设备上轻松访问并优化了在线分享与互动。通过将PDF文件转换为HTML格式&#xff0c;我们可以更方便地在浏览器中展示PDF文档内容&#xff0c;同时也更容…...

编程日记 2025/1/4 13:45:07

mamba-ssm安装

注意1&#xff1a;mamba-ssm要与casual-conv1d一起安装。 注意2&#xff1a;mamba-ssm与cuda、pytorch版本要对应。需要看你下载的代码的requirements.txt causal-conv1d与mamba的whl包官网下载&#xff1a; https://github.com/Dao-AILab/causal-conv1d/releases?page3 htt…...

编程日记 2025/1/4 13:44:06

网络IP协议

IP&#xff08;Internet Protocol&#xff0c;网际协议&#xff09;是TCP/IP协议族中重要的协议&#xff0c;主要负责将数据包发送给目标主机。IP相当于OSI&#xff08;图1&#xff09;的第三层网络层。网络层的主要作用是失陷终端节点之间的通信。这种终端节点之间的通信也叫点…...

编程日记 2025/1/4 13:43:04

双指针算法详解

目录 一、双指针 二、双指针题目 1.移动零 解法&#xff1a; 代码&#xff1a; 2.复写零 ​编辑 解法&#xff1a; 代码&#xff1a; 边界情况处理: 3.快乐数 ​编辑 解法:快慢指针 代码&#xff1a; 4.盛水最多的容器 解法&#xff1a;&#xff08;对撞指针&#xff09;…...

编程日记 2025/1/4 13:42:01

MogFace人脸检测工具实操案例：从监控截图提取人脸ROI用于后续关键点分析

MogFace人脸检测工具实操案例&#xff1a;从监控截图提取人脸ROI用于后续关键点分析 1. 引言&#xff1a;从监控画面到精准分析 想象一下&#xff0c;你手头有一堆从监控摄像头截取的图片&#xff0c;里面可能有多个人脸&#xff0c;有的正对着镜头&#xff0c;有的侧着脸&am…...

编程新知 2026/3/31 20:17:49

Phi-4-mini-reasoning应用场景：AI编程教练中算法题逻辑拆解与反馈生成

Phi-4-mini-reasoning应用场景&#xff1a;AI编程教练中算法题逻辑拆解与反馈生成 1. 模型介绍 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理需要多步逻辑分析的场景。与通用聊天模型不同&#xff0c;它被设计用来解决数学题、逻辑题等需…...

编程新知 2026/3/31 19:33:12

MTK手机屏显干扰全解析：亮灭屏、射频干扰与TP失灵，我是如何用PLL_CLOCK和Porch参数解决的

MTK手机屏显干扰全解析&#xff1a;亮灭屏、射频干扰与TP失灵实战解决方案 引言&#xff1a;当屏幕开始"跳舞"——移动设备显示异常背后的复杂世界 那块6.5英寸的OLED屏幕又一次在通话过程中突然闪烁起来&#xff0c;像被无形的幽灵操控着。作为MTK平台驱动开发工程师…...

编程新知 2026/3/31 18:58:20

Lingyuxiu MXJ LoRA开源镜像指南：从下载到生成的完整开箱即用流程

Lingyuxiu MXJ LoRA开源镜像指南&#xff1a;从下载到生成的完整开箱即用流程 1. 项目简介 Lingyuxiu MXJ LoRA 是一款专门为生成唯美真人风格人像而设计的轻量级AI图像生成系统。这个项目最大的特点就是针对人像摄影进行了深度优化&#xff0c;能够生成五官精致、光影柔和、…...

编程新知 2026/3/31 18:13:49

LiveTalking 部署踩坑笔记

目录 版本特点&#xff1a; tts方案&#xff1a; musetalk方案 一、先确认&#xff1a;1985 端口有没有在监听 Windows&#xff1a; Linux&#xff1a; 报错&#xff1a;SyntaxError: ( was never closed 版本特点&#xff1a; 日常开发 / 测试 / 本地实时 Demo → Wav2…...

编程新知 2026/3/31 17:17:04

利用快马平台与vscode codex快速构建react待办事项应用原型

最近在尝试用AI工具快速验证产品原型&#xff0c;发现InsCode(快马)平台配合VSCode Codex能实现惊人的开发效率。以React待办事项应用为例&#xff0c;从零到可交互原型只用了不到10分钟&#xff0c;分享下具体实现思路和操作过程。 需求拆解与AI描述 首先将待办事项应用的7个核…...

编程新知 2026/3/31 16:52:29

桌面高颜值时钟工具,支持置顶鼠标穿透

软件介绍 今天要说的这款工具叫WithClock&#xff0c;它是一个时钟工具。这款工具的设计特别简洁&#xff0c;看着很舒服&#xff0c;没什么多余的东西&#xff0c;颜值也挺高。 功能操作 它支持鼠标穿透&#xff0c;你只需要在时钟上点右键&#xff0c;选择“置顶”&#xf…...

编程新知 2026/3/31 16:52:24

戴森球计划FactoryBluePrints：解锁游戏工厂建造的终极免费蓝图库

戴森球计划FactoryBluePrints&#xff1a;解锁游戏工厂建造的终极免费蓝图库 【免费下载链接】FactoryBluePrints 游戏戴森球计划的**工厂**蓝图仓库 项目地址: https://gitcode.com/GitHub_Trending/fa/FactoryBluePrints 还在为《戴森球计划》中复杂的工厂布局头疼吗&…...

编程新知 2026/3/31 15:37:23

如何通过技术优化提升Element Plus开发效率

如何通过技术优化提升Element Plus开发效率 【免费下载链接】element-plus &#x1f389; A Vue.js 3 UI Library made by Element team 项目地址: https://gitcode.com/GitHub_Trending/el/element-plus 在前端开发过程中&#xff0c;Element Plus作为一款基于Vue.js 3…...

编程新知 2026/3/31 14:54:15

基于H5的初学开发

目标&#xff1a;​ 1.能搭出页面​ 2.能看懂基本标签​ 3.能做表单​ 4.能放图片、音频、视频​ 5.能做简单画布效果​ 6.能做一个 AI Photo Booth 静态演示页​ 7.每个实验做完都能看到结果&#xff0c;不容易卡死 开发工具&#xff1a;VS Cod 本实验覆盖哪些 H5 内容​ 1.h…...

编程新知 2026/3/31 14:34:05