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

【Vue】vue指令

news 2025/9/20 20:07:28

目录

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/20 0:09:21

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/9/17 5:38:47

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/9/11 12:55:00

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/9/3 8:33:23

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/7/23 10:55:13

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/8/21 2:18:11

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2025/9/4 2:23:45