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

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

news 文章来源：https://blog.csdn.net/2301_76890677/article/details/144058162 2025/5/6 15:24:46

（一）初识指令和内容渲染指令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

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

2. v-if

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

示例代码：

<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

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

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

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 是被遍历的数组

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

作用：多次渲染整个元素（数组，数字，对象），基于数据循环
遍历数组语法：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>
注意：

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

key 的值必须具有唯一性

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

区别：加key-不加key

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

v-for 的默认行为会尝试原地修改元素（就地复用）

当不加key删除元素的时候，程序就会直接在前几个数据里修改，比如删除第一个，那么就会把第一个元素的文字删除了，但是其他的一些属性没有删除，然后把下面的文字提上来。

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

所谓双向绑定就是：

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

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

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

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

语法：v-model="变量"

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

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

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

代码示例：

<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

目录 （一）初识指令和内容渲染指令v-html 1.v-html 案例： 官网的API文档 （二）条件渲染指令v-show和v-if 1. v-show 2. v-if （三）条件渲染指令v-else和v-else-if 案例 （四…...

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

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

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

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

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

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

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

34.1 uber开源的m3db简介

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

编程日记 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为例，进入嘉立创商城网站，找到需要的元器件封装复制编号，打开嘉立创EDA，编译器选择专业版，新建工程，点击PCB1 复制编号在搜索框中，点击搜索，然后放置…...

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

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

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

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

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

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

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

Qt多线程与QTimer详解

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

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

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

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

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

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

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

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

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

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

五、docker的网络模式

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

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

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

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

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

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

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

编程日记 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安装文件。下载地址：MySQL官网进入后点击下面的MySQL社区版下载点击MySQL Comunity Server。我这里选择的是版本8.4.3LTS版本，在线对应的msi文件。点击No thanks,直接下载。二、安装MySQL 2.1、双击刚刚下载好的msi文件，…...

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

MySQL-DDL之数据库操作

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

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

Python 笔记之进程通信

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

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

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

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

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

生产者-消费者模式：多线程并发协作的经典案例

生产者-消费者模式是多线程并发编程中一个非常经典的模式，它通过解耦生产者和消费者的关系，使得两者可以独立工作，从而提高系统的并发性和可扩展性。本文将详细介绍生产者-消费者模式的概念、实现方式以及应用场景。 1 生产者-消费者模式概述…...

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

数据库-mysql(基本语句)

演示工具：navicat 连接：mydb 一.操作数据库 1.创建数据库 ①create database 数据库名称 //普通创建 ②create database if not exists 数据库名称 //创建数据库，判断不存在，再创建： 使用指定数据库 use 数据库…...

编程日记 2024/12/9 4:24:36

android12L super.img 解压缩及其挂载到ubuntu18.04

本文介绍如何在Ubuntu18.04上解压缩高通平台Android12L的super.img，并将其挂载到系统中查看内容。在源码的根目录下，执行如下命令： out/host/linux-x86/bin/simg2img out/target/product/msmnile_gvmq/super.img super.img_rawmkdir super…...

编程日记 2024/12/9 4:21:33

flask简易版的后端服务创建接口(python)

1.pip install安装Flask和CORS 2.创建http_server.py文件，内容如下 """ ============================ 简易版的后端服务 ============================ """ from flask import Flask, request, jsonify from flask_cors import CORS app = F…...

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