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

Vue指令（一）--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model

news 2025/12/27 8:35:01

目录

（一）初识指令和内容渲染指令v-html

1.v-html

案例： 

官网的API文档 

（二）条件渲染指令v-show和v-if 

1. v-show

2. v-if

（三）条件渲染指令v-else和v-else-if

案例 

（四）事件绑定指令 v-on

 1.内联语句

 简写

2.事件处理函数

  3.给事件处理函数传参

（五）属性绑定指令v-bind

（六）列表渲染指令v-for

1.v-for中的key

区别：加key-不加key 

（七）双向绑定指令v-model

（一）初识指令和内容渲染指令v-html

Vue 会根据不同的 【指令】 ，针对标签实现不同的 【功能】
指令：带有 v- 前缀 的 特殊 标签属性

1.v-html

作用：设置元素的 innerHTML
语法：v-html = " 表达式 "

案例： 

<body>

    <div id="app">

        <div v-html="msg"></div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script>

        const app = new Vue({

            el: '#app',

            data: {

                msg: `

                    <a href="https://www.baidu.com">

                        baidu

                    </a>

                    `

            }

        })

    </script>

</body>

 

官网的API文档 

（二）条件渲染指令v-show和v-if 

1. v-show

  1. 作用： 控制元素显示隐藏
  2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
  3. 原理： 切换 display:none 控制显示隐藏
  4. 场景： 频繁切换显示隐藏的场景

2. v-if

  1. 作用： 控制元素显示隐藏（条件渲染）
  2. 语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
  3. 原理： 基于条件判断，是否 创建 或 移除 元素节点
  4. 场景： 要么显示，要么隐藏，不频繁切换的场景

示例代码：

<html>

    <head>

        <style>

            .box {

                border: 3px solid #000000;

                border-radius: 10px;

                padding: 20px;

                margin: 20px;

                width: 200px;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <div v-show="flag" class="box">我是v-show控制的盒子</div>

            <div v-if="flag" class="box">我是v-if控制的盒子</div>

        </div>

   

        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

   

        <script>

            const app = new Vue({

                el: '#app',

                data: {

                    flag:true,

                }

            })

        </script>

    </body>

</html>

演示截图：

当flag为true时：

当flag为false时：

1.v-show的底层原理：

切换css的diaplay: none来控制显示还是隐藏

2.v-if的底层原理：

根据判断条件来控制元素的创建和移除（当结果为true时当前元素就创建出来，为false时元素就销毁）

（三）条件渲染指令v-else和v-else-if

1. 作用： 辅助 v-if 进行判断 渲染
2. 语法： v-else v-else-if = "表达式"
3. 注意： 需要紧挨着 v-if 一起使用

案例 

 示例代码：

<html>

    <head>

        <title>

            案例

        </title>

    </head>

    <body>

        <div id="app">

            <p v-if="gender === 1">性别：♂ 男</p>

            <p v-else>性别：♀ 女</p>

            <hr>

            <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>

            <p v-else-if="score >=70">成绩评定B：奖励周末郊游</p>

            <p v-else-if="score >=60">成绩评定C：奖励零食礼包</p>

            <p v-else>成绩评定D：惩罚一周不能玩手机</p>

        </div>

   

        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

   

        <script>

            const app = new Vue({

                el: '#app',

                data: {

                    gender:1,

                    score:80

                }

            })

        </script>

    </body>

</html>

演示截图：

（四）事件绑定指令 v-on

作用：注册时间=添加时间+提供处理逻辑

语法：

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

 1.内联语句

<body><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

页面实现：

事件名也不是非要写click，可以换成别的，比如mouseenter：

<body><div id="app"><button v-on:mouseenter="count--">-</button><span>{{count}}</span><button v-on:mouseenter="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {count:111}})</script></body>

将鼠标移到“-”和“+”按钮，不用点击，就可实现加减

 简写

将v-on:这一整块换成@，也就是换成@click，同样可以实现

2.事件处理函数

内联语句只适用逻辑简单的语句，当逻辑代码多了的时候，就需要更换了

语法：

v-on:事件名 = "methods中的函数名"

注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中

  • methods中的函数内部的this都指向Vue实例

案例：

 在页面设置一个按钮，能够多次切换隐藏文字

<body><div id="app"><button @click="fun()">切换显示隐藏</button><h2 v-show="isShow">嘿嘿嘿</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {isShow:true},methods:{fun(){app.isShow = !app.isShow}}})</script></body>

运行结果：

把app换成this也是可以的，这样的可读性更高

  3.给事件处理函数传参

  • 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

  • 如果传递了参数，则实参 $event 表示事件对象，固定用法。

语法格式：

@click="fn(参数1,参数2)"

案例：

设置一个box，提供几个按钮，模拟买果汁，设置不同的饮料不同的价格，将每个饮料的价格参数传到事件处理函数中，更改剩余的钱的余额

<head><title>v-on指令案例</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style></head><body><div id="app"><div class="box"><h2>小蔡自动售货机</h2><button @click="buy(2)">可口可乐3元</button><button @click="buy(4)">橙汁4元</button><button @click="buy(5)">咖啡5元</button></div><p>银行卡余额：{{money}}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data: {money:100000},methods:{buy(price){this.money-=price}}})</script></body>

运行效果;

（五）属性绑定指令v-bind

  1. 作用：动态设置html的标签属性 比如：src、url、title

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

  3. v-bind:可以简写成 => :

 案例：

动态绑定图片和一段文字

<div id="app"><img v-bind:src="url" v-bind:title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app=new Vue({el:'#app',data:{url:'./img/1.png',msg:'金木'}})</script>

运行结果：

简写

运行结果：

（六）列表渲染指令v-for

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项

  • index 是每一项的索引，不需要可以省略

  • arr 是被遍历的数组

此语法也可以遍历对象和数

  1. 作用：多次渲染整个元素（数组，数字，对象），基于数据循环
  2. 遍历数组语法：v-for="(item,index) in 数组" ​​​​

 案例：

遍历一个数组并在页面上输出

<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app"><div v-for="(item,index) in list">{{item}} - {{index}}</div></div><script>const app=new Vue({el:'#app',data:{list:['菠萝','苹果','橘子','榴莲']}})</script></body>

运行结果：

在渲染的时候我们只用到了item，那么我们是否可以省略index呢？

可以

运行结果：

1.v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

 实例代码：

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

注意：

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

区别：加key-不加key 

key的作用：给元素添加唯一标识

v-for 的默认行为会尝试 原地修改元素 （ 就地复用 ）
       当不加key删除元素的时候，程序就会直接在前几个数据里修改，比如删除第一个，那么就会把第一个元素的文字删除了，但是其他的一些属性没有删除，然后把下面的文字提上来。

（七）双向绑定指令v-model

所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新

  2. 页面结果更新后，数据也会随之而变

可以快速获取或设置表单元素的内容

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量"

需求：使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容

  2. 点击重置按钮清空表单中的内容  

 代码示例：

<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app">用户名：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script>const app=new Vue({el:'#app',data:{username:'',password:''},methods:{login(){console.log(this.username,this.password)},reset(){this.username='',this.password=''}}})</script></body>

运行结果：

点击重置

点击登录

相关文章：

Vue指令（一）--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model

目录 &#xff08;一&#xff09;初识指令和内容渲染指令v-html 1.v-html 案例&#xff1a; 官网的API文档 &#xff08;二&#xff09;条件渲染指令v-show和v-if 1. v-show 2. v-if &#xff08;三&#xff09;条件渲染指令v-else和v-else-if 案例 &#xff08;四…...

编程日记 2024/12/9 5:24:49

ElK 8 收集 MySQL 慢查询日志并通过 ElastAlert2 告警至飞书

文章目录 1. 说明2. 启个 mysql3. 设置慢查询4. filebeat 设置5. 触发慢查询6. MySQL 告警至飞书 1. 说明 elk 版本&#xff1a;8.15.0 2. 启个 mysql docker-compose.yml 中 mysql&#xff1a; mysql:# restart: alwaysimage: mysql:8.0.27# ports:# - "3306:3306&q…...

编程日记 2024/12/9 5:22:46

QT通过在线安装器安装【详细】

在线安装器地址&#xff1a; 官方在线安装器&#xff1a;Index of /official_releases/online_installers (qt.io) 通过命令行启动安装页面 直接双击qt安装程序&#xff0c;在线安装会非常慢&#xff0c;甚至安装失败&#xff0c;所以通过命令行页面启动安装页面。点击wind…...

编程日记 2024/12/9 5:21:45

34.1 uber开源的m3db简介

本节重点介绍 : m3db自己的定位m3db自己的架构m3db自己的组件 两句话简介 M3最初是在优步开发的&#xff0c;目的是提供对优步业务运营&#xff0c;微服务和基础架构的可视性由于M3具有轻松进行水平扩展的能力&#xff0c;因此它为所有监视用例提供了一个集中式存储解决方案…...

编程日记 2024/12/9 5:18:40

MATLAB 最小二乘点云拟合球 （89）

MATLAB 最小二乘点云拟合球 （89） 一、算法介绍二、算法实现1.代码2.结果这是缘，亦是最美的相见 一、算法介绍 球面拟合算法是一种通过数学方法将一组三维点（通常在三维空间中分布）拟合到一个理想的球形表面上。这个过程通常涉及使用最小二乘法来最小化实际数据点与拟合的…...

编程日记 2024/12/9 5:17:39

【Altium Designer 】AD如何使用嘉立创元器件的3D封装

1.下载3D封装 以STM32F407VGT6为例&#xff0c;进入嘉立创商城网站&#xff0c;找到需要的元器件封装 复制编号&#xff0c;打开嘉立创EDA&#xff0c;编译器选择专业版&#xff0c;新建工程&#xff0c;点击PCB1 复制编号在搜索框中&#xff0c;点击搜索&#xff0c;然后放置…...

编程日记 2024/12/9 5:13:35

G15沈海高速茶白高架自动化监测

1. 项目简介 G15 沈海高速公路北起辽宁省沈阳市苏家屯区金宝台枢纽&#xff0c;与沈阳市绕城高速公路&#xff08;国家高速 G1501&#xff09;相接&#xff0c;南至海南省海口市秀英区粤海枢纽&#xff0c;与海南地区环线高速公路&#xff08;国家高速 G98&#xff09;相交&am…...

编程日记 2024/12/9 5:08:29

网站从渗透到mssql提权全过程

2|0渗透全过程 1.信息收集-端口探测 1&#xff09;Nmap端口探测&#xff1a;namp -sS -p 1-65535 172.16.12.103 可以看到端口开放情况 2.判断系统情况 根据端口情况初步判定为IISmssql.net系统&#xff0c;访问web站点URL应该为&#xff1a;http:172.16.12.103:27689 访问…...

编程日记 2024/12/9 5:00:22

Qt多线程与QTimer详解

引用 Qt多线程中使用QTimer&#xff08;常见问题汇总&#xff09; [多线程]多线程使用QTimer Qt::ConnectionType&#xff1a;Qt不同类型connect的详细区别说明与应用 Qt的4种多线程实现方式 一文搞定之Qt多线程(QThread、moveToThread) QTimer The QTimer class provides repe…...

编程日记 2024/12/9 4:58:18

基于stm23的智慧宿舍系统 （DAY10）_小程序

好久没记录开发进度了&#xff0c;今天小程序差不多开发完了&#xff0c;UI这块算是比较常见了&#xff0c;主要功能是能连接onenet查看设备上传的数据&#xff0c;同时也能对设备进行一些控制下面是几个主要的函数&#xff0c;功能比较简单 wx.request({url: ${apiBaseUrl}/t…...

编程日记 2024/12/9 4:56:16

深入理解Spring事务

目录 什么是Spring事务为什么需要Spring事务Spring事务的实现 Spring事务的传播机制Spring事务的底层原理 EnableTransactionManagement --开启Spring管理事务Import(TransactionManagementConfigurationSelector.class) --提供两个beanAutoProxyRegistrar --启用AOP的功能&am…...

编程日记 2024/12/9 4:53:12

Ubuntu22.04深度学习环境安装【Anaconda+Pycharm】

anaconda可以提供多个独立的虚拟环境&#xff0c;方便我们学习深度学习&#xff08;比如复现论文&#xff09;&#xff1b; Pycharm编辑器可以高效的编写python代码&#xff0c;也是一个很不错的工具。 下面就记录下Ubuntu22.04的安装流程&#xff1a; 1.Anaconda安装 下载Ana…...

编程日记 2024/12/9 4:52:10

五、docker的网络模式

五、docker的网络模式 5.1 Docker的四种网络模式 当你安装docker时&#xff0c;它会自动创建三个网络&#xff0c;可使用如下命令查看&#xff1a; [rootlocalhost ~]# docker network ls NETWORK ID NAME DRIVER SCOPE 7390284b02d6 bridge bridge lo…...

编程日记 2024/12/9 4:51:08

使用el-row和el-col混合table设计栅格化，实现表头自适应宽度，表格高度占位

演示效果&#xff1a; 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建: 页面效果&#xff1a; 代码分析: 上面使用el-row和el-col搭建表单显示 第一排三个8,第二排8和16 下面混合table实现&#xff0c;并使用border来自适应宽度…...

编程日记 2024/12/9 4:47:03

【服务器监控】grafana+Prometheus+node exporter详细部署文档

我们在进行测试时&#xff0c;不可能一直手动看着服务器的性能消耗&#xff0c;这时候就需要有个工具替我们监控服务器的性能消耗。这里记录下grafanaPrometheusnodeExporter的组合用于监控服务器。 简单介绍&#xff1a; grafana&#xff1a;看板工具&#xff0c;所有采集的…...

编程日记 2024/12/9 4:46:01

JavaScript中todolist操作--待办事项的添加 删除 完成功能

效果图 在文本框中输入内容点击添加按钮会在下面生成 添加功能 html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&qu…...

编程日记 2024/12/9 4:41:56

Windows中MySQL8.3.4 MSI版本——详细安装教程

一、下载MySQL安装文件。 下载地址&#xff1a;MySQL官网 进入后点击下面的MySQL社区版下载 点击MySQL Comunity Server。 我这里选择的是版本8.4.3LTS版本&#xff0c;在线对应的msi文件。 点击No thanks,直接下载。 二、安装MySQL 2.1、双击刚刚下载好的msi文件&#xff0c;…...

编程日记 2024/12/9 4:37:51

MySQL-DDL之数据库操作

文章目录 一. 创建数据库1. 直接创建数据库&#xff0c;如果存在则报错2. 如果数据库不存在则创建3. 创建数据库时设置字符集4. 栗子 二. 查看数据库1. 查看数据库 三. 删除数据库1. 删除数据库 四. 使用数据库1. 使用数据库2. 查看正在使用的数据库 数据定义语言&#xff1a;简…...

编程日记 2024/12/9 4:31:43

Python 笔记之进程通信

当需要创建的子进程数量不多时&#xff0c;可以直接利用multiprocessing中的Process动态生成多个进程 但是如果是上百个或者上千个目标&#xff0c;手动去创建进程的工作量很大&#xff0c;此时就可以利用到Multiprocessing模块提供的Pool方法 初始化pool时&#xff0c;可以指定…...

编程日记 2024/12/9 4:29:41

【Transformer序列预测】Pytorch中构建Transformer对序列进行预测源代码

Python&#xff0c;Pytorch中构建Transformer进行序列预测源程序。包含所有的源代码和数据&#xff0c;程序能够一键运行。此程序是完整的Transformer&#xff0c;即使用了Encoder、Decoder和Embedding所有模块。源程序是用jupyterLab所写&#xff0c;建议分块运行。也整理了.p…...

编程日记 2024/12/9 4:26:38

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/12/9 18:30:35

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/12/23 11:12:42

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/12/19 10:39:38

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/12/25 9:29:48

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/12/23 11:08:56

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/12/24 23:55:15

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15