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

Vue中常用指令

news 2025/12/31 10:04:52

一、内容渲染指令

        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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/12/29 11:15:32

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/12/26 8:41:58

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/12/16 19:44:25

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/12/31 5:06:53

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/7/5 19:39:42