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

【Vue】vue指令

news 2026/4/22 15:25:27

目录

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

避开EtherCAT FOE开发的那些坑：从Busy状态处理到数据包边界问题详解

EtherCAT FOE开发实战&#xff1a;从协议细节到异常处理全解析 当你在凌晨三点的实验室里盯着示波器上那些不按预期跳变的信号线时&#xff0c;可能会突然意识到——工业通信协议的魔鬼都藏在细节里。EtherCAT的FOE&#xff08;File Access over EtherCAT&#xff09;协议看似简…...

编程新知 2026/4/22 15:23:29

企业统一任务调度平台MoiaControl介绍

1、批量作业调度的现状当前批量作业调度软件普遍面临着一些问题&#xff1a;调度方式原始落后时至今日仍然有一些系统使用人工调度或操作系统的crontab方式调度。在如今追求自动化甚至智能化的时代已显得非常原始和低效&#xff0c;容易出错且难以监控&#xff0c;已成为这类系…...

编程新知 2026/4/22 15:19:03

5分钟搞定中科蓝讯SDK编译：用CodeBlocks快速验证RV32-Toolchain环境配置

5分钟搞定中科蓝讯SDK编译&#xff1a;用CodeBlocks快速验证RV32-Toolchain环境配置 对于嵌入式开发者来说&#xff0c;搭建一个稳定可靠的开发环境往往是项目开发的第一步。中科蓝讯基于RISC-V架构的蓝牙芯片方案&#xff0c;以其高性价比和低功耗特性&#xff0c;在TWS耳机、…...

编程新知 2026/4/22 15:03:30

Real-Anime-Z一文详解：LoRA轻量微调原理、融合逻辑与推理加速技巧

Real-Anime-Z一文详解&#xff1a;LoRA轻量微调原理、融合逻辑与推理加速技巧 1. 项目概述 Real-Anime-Z是一款基于Stable Diffusion技术的写实向动漫风格大模型&#xff0c;由Devilworld团队开发。它巧妙地在写实与纯动漫风格之间找到了平衡点&#xff0c;创造出独特的2.5D视…...

编程新知 2026/4/22 15:01:28

别再盲目重启dockerd！Docker守护进程网络栈内存泄漏（OOMKilled频发）的48小时根因追踪实录

第一章&#xff1a;Docker 网络优化Docker 默认的 bridge 网络在高并发、低延迟或跨主机通信场景下常面临性能瓶颈&#xff0c;包括 NAT 开销、iptables 规则膨胀、DNS 解析延迟及容器间网络隔离粒度不足等问题。优化 Docker 网络需从驱动选择、网络拓扑设计、内核参数调优和运…...

编程新知 2026/4/22 14:08:43

AMD硬件调试终极指南：使用SMUDebugTool实现性能调优

AMD硬件调试终极指南&#xff1a;使用SMUDebugTool实现性能调优 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitc…...

编程新知 2026/4/22 11:35:30

从波束形成到图像重构：深度解析合成孔径、MIMO与相控阵雷达的技术内核

1. 雷达技术的三大支柱&#xff1a;从基础概念说起 第一次接触合成孔径雷达、MIMO雷达和相控阵雷达时&#xff0c;很多人都会被这些专业术语绕晕。其实这三种技术都源于同一个核心问题&#xff1a;如何在有限的物理尺寸下&#xff0c;获得更好的雷达探测性能。这就好比我们用手…...

编程新知 2026/4/22 11:26:48

Applite：macOS软件管理的终极图形化解决方案，告别命令行烦恼

Applite&#xff1a;macOS软件管理的终极图形化解决方案&#xff0c;告别命令行烦恼 【免费下载链接】Applite User-friendly GUI macOS application for Homebrew Casks 项目地址: https://gitcode.com/gh_mirrors/ap/Applite 你是否曾经因为要在macOS上安装软件而感到…...

编程新知 2026/4/22 11:18:12

抖音批量下载工具完整指南：轻松保存视频、合集与直播内容

抖音批量下载工具完整指南&#xff1a;轻松保存视频、合集与直播内容 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…...

编程新知 2026/4/22 11:14:08

ESP32+MicroPython玩转ST7735小屏幕：从接线到显示中文的保姆级避坑指南

ESP32MicroPython玩转ST7735小屏幕&#xff1a;从接线到显示中文的保姆级避坑指南 1. 硬件准备与接线图解析 当你第一次拿到ESP32开发板和ST7735屏幕时&#xff0c;面对密密麻麻的引脚可能会感到无从下手。别担心&#xff0c;我们先从最基础的物理连接开始。ESP32的3.3V逻辑电平…...

编程新知 2026/4/22 10:12:02