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

【Vue】vue指令

news 2026/2/3 12:58:52

目录

V-html

v-show和v-if

v-show

显示

隐藏

v-if

显示

隐藏

总结

显示隐藏的应用场景

未登录的情况

登录的情况

v- else 和 v-else-if

v-if 和v-else

v-if 和 v-else-if

 总结：

v-on

语法一：

语法二：

@ 

调用传参

v-bind 

v-for

v-model

指令： 带有  v-  前缀的特殊标签属性

V-html

未使用V-html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器  -->
<div id="app">
<div>{{msg}}</div></div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>Vue.config.productionTip =false;var  app=new Vue({el:'#app',data:{msg:'<a href="http://www.baidu.com">百度</a>'}});
</script>
</body>
</html>

 输出来的是一串字符串

如果使用v-html 标签，效果如下

v-show和v-if

作用：控制元素显示隐藏

v-show

显示

 查看控制台

隐藏

隐藏起来了

查看控制台

 通过控制台的数据，可以得知v- show是通过切换css 来控制显示隐藏

v-if

再来看看v-if 是一个什么样的情况

显示

隐藏

  通过控制台的数据，可以得知v- if是通过根据条件的判断来创建或者移除元素节点来

  控制显示隐藏

总结

两者的作用都是控制元素显示隐藏，但是两者使用的原理不同，v-show使用切换css来

控制显示隐藏，v-if 基于条件的判断来创建或者移除元素节点

显示隐藏的应用场景

通过一个例子来体会一下显示隐藏到底是用来干嘛的

京东官网的首页

未登录的情况

如果没有登录或者注册的情况，就会出现 “  你好，请登录  免费注册“ 

登录的情况

登录进去的时候再来看首页，就没有 “  你好，请登录  免费注册“ 

根据条件来判断是否登录，如果没有登录就创建这样元素节点（ “  你好，请登录  免费注册“ ），如果登录，就移除节点。

如上就是举了一个例子，具体使用了什么方式不清楚，但原理差不多

v- else 和 v-else-if

作用： 辅助v-if 进行判断渲染

v-if 和v-else

 

v-if 和 v-else-if

 总结：

v-else和 v-else-if不能单独使用，需要辅助v-if才能使用

v-on

作用： 用来监听dom事件，并执行处理逻辑

语法一：

v-on: 事件名=” 内联语句“

 

点击+就会执行num++的方法 

点击-就会执行num--的方法

语法二：

v-on :事件名= ” 函数方法名“ 

注意： method后面要加s   函数名后面要带：

 点击按钮出现弹出框

@ 

@可以代替v-on:

调用传参

<div id="app"><div class="box"><h1>水卡充值</h1><button @click="recharge(5)">充值5元</button><button @click="recharge(10)">充值10元</button><button @click="recharge(20)">充值20元</button></div>
<p>银行卡余额:{{money}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data:{money:300},methods:{recharge: function (a){this.money-=a}}});
</script>

点击充值5元

v-bind 

作用：用于将 Vue 实例的数据绑定到 HTML 元素的属性上。比如 src url  title

语法： v-bind :属性名=” 表达式“

<!--准备容器  -->
<div id="app">
<img v-bind:src="imageUrl"  alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data:{imageUrl: './images/th.jpg'},});
</script>

v-bind也可以省略不写

<div id="app">
<img :src="imageUrl"  alt="">
</div>

v-for

作用： 基于数据循环，多次渲染整个元素

语法 ： v-for ="(item , index) in 数组

<div id="app"><h2>四大名著</h2><li v-for="(item,index) in list">{{item}}</li>
</div>
<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data:{list:['三国演义' ,'水浒传','西游记','红楼梦']}});
</script>

 

v-model

作用：  作用于表单元素，可以让数据和视图，形成双向绑定（绑定之后，可以快速获取

或设置表单元素的内容）

语法： v-model="变量”

<div id="app">账户: <input type="text" v-model="name"><br><br>密码: <input type="password" ><br><br><button>登录</button><button>重置</button>
</div>

<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data: {name: '',password: ''}reset(){this.name=''this.password=''}});
</script>

打开控制台使用浏览器安装的vue插件

浏览器安装vue插件

https://blog.csdn.net/m0_67930426/article/details/134598104?spm=1001.2014.3001.5502

 输入数据后点击

保存

 

 

相关文章：

【Vue】vue指令

目录 V-html v-show和v-if v-show 显示 隐藏 v-if 显示 隐藏 总结 显示隐藏的应用场景 未登录的情况 登录的情况 v- else 和 v-else-if v-if 和v-else v-if 和 v-else-if 总结&#xff1a; v-on 语法一&#xff1a; 语法二&#xff1a; 调用传参 v-bind…...

编程日记 2023/11/25 10:14:40

记录华为云服务器（Linux 可视化 宝塔面板）-- 安全组篇

文章目录 前言安全组说明安全组的特性安全组的应用场景 进入安全组添加基本规则添加自定义规则如有启发&#xff0c;可点赞收藏哟~ 前言 和windows防火墙类似&#xff0c;安全组是一种虚拟防火墙&#xff0c;具备状态检测和数据包过滤功能&#xff0c;可以对进出云服务器的流量…...

编程日记 2023/11/25 10:13:39

基于Python 中创建 Sentinel-2 RGB 合成图像

一、前言 下面的python代码将带您了解如何从原始 Sentinel-2 图像创建 RGB 合成图像的过程。 免费注册后&#xff0c;可以从 Open Access Hub 下载原始图像。 请注意&#xff0c;激活您的帐户可能需要 24 小时&#xff01; 二、准备工作 &#xff08;1&#xff09;导入必要的库…...

编程日记 2023/11/25 10:12:37

保姆级连接FusionInsight MRS kerberos Hive

数新网络&#xff0c;让每个人享受数据的价值https://xie.infoq.cn/link?targethttps%3A%2F%2Fwww.datacyber.com%2F 概述 本文将介绍在华为云 FusionInsight MRS&#xff08;Managed Relational Service&#xff09;的Kerberos环境中&#xff0c;如何使用Java和DBeaver实现远…...

编程日记 2023/11/25 10:11:36

electerm 跨平台的终端 /ssh/sftp 客户端

文章目录 electerm功能特性主题配色 electerm 每个程序员基本都离开SSH链接工具,目前市场上好用的基本都是收费的 给大家推荐一款国人开发的开源链接工具https://github.com/electerm/electerm 到目前为止star已经9.5K了,非常受欢迎 功能特性 支持ssh,telnet,serialport,本地和…...

编程日记 2023/11/25 10:10:34

Anthropic LLM论文阅读笔记

研究时间&#xff1a;与Instrcut GPT同期的工作&#xff0c;虽然其比ChatGPT发布更晚&#xff0c;但是其实完成的时间比ChatGPT更早。与ChatGPT的应用区别&#xff1a;该模型比ChatGPT回答我不知道的概率更高。将强化学习用于大语言模型&#xff08;RLHF&#xff09;&#xff1…...

编程日记 2023/11/25 10:09:33

docker启动容器失败，然后查看日志，docker logs查看容器出现报错：

docker 启动容器失败&#xff0c;然后docker logs 查看容器出现报错&#xff1a; error from daemon in stream: Error grabbing logs: invalid character l after object key:value pair在网上看到的 解决方案&#xff1a; 找到你日志文件目录&#xff1a; docker inspect …...

编程日记 2023/11/25 10:08:31

【开源】基于Vue.js的网上药店系统

项目编号&#xff1a; S 062 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S062&#xff0c;文末获取源码。} 项目编号&#xff1a;S062&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 药品类型模块2.3 药…...

编程日记 2023/11/25 10:07:30

App 设计工具

目录 说明 打开 App 设计工具 示例 创建 App 创建自定义 UI 组件 打开现有 App 文件 打包和共享 App 本文主要讲述以交互方式创建 App。 说明 App 设计工具是一个交互式开发环境&#xff0c;用于设计 App 布局并对其行为进行编程。 可以使用 App 设计工具&#xff1a…...

编程日记 2023/11/25 10:06:28

毅速：3D打印随形透气钢为解决模具困气提供了新助力

在模具行业中&#xff0c;困气是一个较常见的问题。解决困气问题的方法有很多&#xff0c;透气钢就是其一。传统的制造的透气钢往往存在一些不足&#xff0c;如加工难度大、无法满足复杂形状的需求等。随着3D打印技术的发展&#xff0c;一种新型的随形透气钢技术逐渐崭露头角&a…...

编程日记 2023/11/25 10:05:26

某软件商店app抓包分析与sign加密算法实现

文章目录 1. 写在前面2. 抓包配置3. 抓包分析4. 接口测试5. sign加密算法6. 数据效果展示 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】…...

编程日记 2023/11/25 10:04:25

万界星空科技QMS质量管理系统功能

QMS质量管理系统结合质量决策、综合质量管理、过程质量控制三个层次要素&#xff0c;帮助企业实现产品全寿命周期质量数据的及时、灵活、准确和全面采集。 通过质量管理软件能够实现质量数据科学处理和应用&#xff0c;包括数据的系统化组织、结构化存贮、便捷式查询、定制化统…...

编程日记 2023/11/25 10:03:25

杨传辉：从一体化架构，到一体化产品，为关键业务负载打造一体化数据库

在刚刚结束的年度发布会上&#xff0c;OceanBase正式推出一体化数据库的首个长期支持版本 4.2.1 LTS&#xff0c;这是面向 OLTP 核心场景的全功能里程碑版本&#xff0c;相比上一个 3.2.4 LTS 版本&#xff0c;新版本能力全面提升&#xff0c;适应场景更加丰富&#xff0c;有更…...

编程日记 2023/11/25 10:02:24

oracle “ORA-25153:临时表空间为空”

从生产上面备份出来了一个数据库&#xff0c;应用在使用时显示ORA-25153临时表空间为空的报错&#xff0c;原因一般是数据库迁移时&#xff0c;没有迁移完整造成的 解决方法 1.创建新的临时表空间temp2 create temporary tablespace temp2 tempfile DATA size 100M autoexten…...

编程日记 2023/11/25 10:01:23

游览器缓存讲解

浏览器缓存是指浏览器在本地存储已经请求过的资源的一种机制&#xff0c;以便在将来的请求中能够更快地获取这些资源&#xff0c;减少对服务器的请求&#xff0c;提高页面加载速度。浏览器缓存主要涉及到两个方面&#xff1a;缓存控制和缓存位置。 缓存控制 Expires 头&#…...

编程日记 2023/11/25 10:00:22

中国天然径流量格点数据集CNRD v1.0（1961-2018）

简介 中国天然径流量是指在中国境内自然形成的各种河流、湖泊、水库等水体中自然产生的流量。根据中国水利部的数据，中国天然径流量在年际变化和地区分布上都非常不均衡。北方地区径流量较小，南方地区则较大；而东部沿海地区的水资源较为丰富，而西北干旱地区的水资源则非常…...

编程日记 2023/11/25 9:59:21

JoyT的科研之旅第一周——科研工具学习及论文阅读收获

CiteSpace概述 CiteSpace 是一个用于可视化和分析科学文献的工具&#xff0c;它专门针对研究者进行文献回顾和趋势分析。CiteSpace 的核心功能是创建文献引用网络&#xff0c;这些网络揭示了研究领域内各个文献之间的相互关系。使用 CiteSpace 可以为论文研究做出贡献的几种方…...

编程日记 2023/11/25 9:58:20

expo 初始化指定SDK版本项目

expo init my-project --template expo-template-blanksdk-44...

编程日记 2023/11/25 9:57:19

js进阶笔记之作用域

目录 全局作用域 局部作用域 函数作用域 块作用域 作用域链 闭包 垃圾回收机制 作用域&#xff08;scope&#xff09;规定了变量能够被访问的“范围”&#xff0c;离开了这个“范围”变量便不能被访问&#xff0c;作用域分为全局作用域和局部作用域。 全局作用域 <…...

编程日记 2023/11/25 9:56:18

【汉诺塔 —— （经典分治递归）】

汉诺塔 —— &#xff08;经典分治递归&#xff09; 一.汉诺塔介绍二.分治算法解决汉诺塔问题三.汉诺塔问题的代码实现四.主函数测试展示 一.汉诺塔介绍 汉诺塔问题源自印度一个古老的传说&#xff0c;印度教的“创造之神”梵天创造世界时做了 3 根金刚石柱&#xff0c;其中的一…...

编程日记 2023/11/25 9:54:16

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/1/24 20:57:58

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/11/5 4:36:26

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

编程新知 2025/12/16 16:11:02

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2026/1/27 11:03:19

k8s从入门到放弃之Pod的容器探针检测

k8s从入门到放弃之Pod的容器探针检测 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;容器探测是指kubelet对容器执行定期诊断的过程&#xff0c;以确保容器中的应用程序处于预期的状态。这些探测是保障应用健康和高可用性的重要机制。Kubernetes提供了两种种类型…...

编程新知 2025/11/5 7:49:23

python3GUI--基于PyQt5+DeepSort+YOLOv8智能人员入侵检测系统（详细图文介绍）

文章目录 一&#xff0e;前言二&#xff0e;技术介绍1.PyQt52.DeepSort3.卡尔曼滤波4.YOLOv85.SQLite36.多线程7.入侵人员检测8.ROI区域 三&#xff0e;核心功能1.登录注册1.登录2.注册 2.主界面1.主界面简介2.数据输入3.参数配置4.告警配置5.操作控制台6.核心内容显示区域7.检…...

编程新知 2026/2/2 3:16:02

【RabbitMQ】- Channel和Delivery Tag机制

在 RabbitMQ 的消费者代码中&#xff0c;Channel 和 tag 参数的存在是为了实现消息确认机制&#xff08;Acknowledgment&#xff09;和精细化的消息控制。 Channel 参数 作用 Channel 是 AMQP 协议的核心操作接口&#xff0c;通过它可以直接与 RabbitMQ 交互&#xff1a; 手…...

编程新知 2026/1/29 12:16:26