v-bind指令——03
v-bind 指令详解：
1 、这个指令是干嘛的？
可以让html标签的某个属性的值产生动态的效果
2、v-bind指令的语法格式：<HTML 标签 v-bind : 参数 = “表达式”> </HTML>
3、v-bind指令的编译原理：
编译前：<HTML 标签 v-bind : 参数 = “表达式”> </HTML>
编译后：<HTML 标签 参数 = “表达式”> </HTML>（以参数作为HTML的属性名）
注意两项：
1.在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
2.表达式会关联data，当data发生改变之后
- v-bind 很常用表格，所有vue框架对该指令提供了一种简写方式：
只是针对v-bind 提供了以下简写方式：<img : src = " imgPath"><br>
5.什么时候使用插值语法？ 什么时候使用命令
凡事标签体中的内容要想动态，需要使用插值语法。只要想让HTML标签的属性动态，需要使用指令语法
<body>
<div id ='app'>
//注意：1、以下代码中msg是变量名
2、原则上v-bind指令后面的这个参数名可以随便写
3、虽然可以随便写，但大部分情况下，这个参数名还是需要写成改HTML标签支持的属性名，这样才会有意义
<span v-bind : abc =“msg”></span>
<span v-bind : abc =“ 'msg ' ”></span> //这个表达式带有单引号，这个‘msg’就不是变量，是常量
v-bind实战：
<img src=“../img/1.png”><br>
<img v-bind : src = " imgPath"><br>
v-bind简写形式
<img : src = " imgPath"><br>
这是一个普通的文本框
<input type =“text” name=“username” value=“zhangsan”><br>
以下文本框可以让value这个数据变成动态的这个就是典型的动态数据绑定
<input type =“text” name=“username”: value=“zhangsan”><br>
使用v-bind也可以让超链接的地址动态
<a href="https://element-plus.org/zh-CN/component/dialog.html">点击</a><br>
<a :href="url">单机</a> <br>
不能采用以下写法：
<a href = "{{url}}">点击吧</a>// 属性内部插值这种语法已经被移除了，可能vue以前的版本中是支持这种写法的，但是现在不允许了。
请使用v-bind冒号速记来代替。请使用<div id= "val">来代替
</div>
<script>
new Vue （{
let i=100；//赋值的过程就可以看做是一种绑定的过程
el : '#app'
data(){
msg : ' qwert'
imgPath : "abc"
username= : 'https://element-plus.org/zh-CN/component/dialog.html' ,
url : 'https:'
}
}）
</scirpt>
</body>
相关文章：
v-bind指令——03
v-bind 指令详解： 1 、这个指令是干嘛的？ 可以让html标签的某个属性的值产生动态的效果 2、v-bind指令的语法格式：<HTML 标签 v-bind : 参数 “表达式”> </HTML> 3、v-bind指令的编译原理： 编译前：…...
RedisTemplate使用
文章目录 RedisTemplate使用String类型Hash类型List类型Set类型Zset类型 RedisTemplate使用 String类型 Overridepublic void testString() {// t11();String key "k1";String currentNum;// 用法1：key是否存在Boolean value client.hasKey(key);log.i…...
文献解读-多组学-第十八期|《整合 WES 和 RNA-Seq 数据以进行短变异发现》
关键词：多组学；基因测序；变异检测； 文献简介 标题（英文）：Integrating WES and RNA-Seq Data For Short Variant Discovery标题（中文）：整合 WES 和 RNA-Seq 数…...
【漏洞复现】锐捷校园网自助服务系统 任意文件读取
声明：本文档或演示材料仅用于教育和教学目的。如果任何个人或组织利用本文档中的信息进行非法活动，将与本文档的作者或发布者无关。 一、漏洞描述 锐捷校园网自助服务系统是用于学校网络管理的一个平台，login_judge.jsf接口存在任意文件读取…...
Centos9安装部署及静态ip配置方案
一、获取centos9的iso镜像 去官网 点击download 官网 点击x86，下载centos9 二、创建虚拟机 1、点击新建虚拟机 2、选择自定义 下一步 3、点击下一步 4、选择稍后安装操作系统 点击下一步 5、选择linux 选择要安装的centos 版本 这里选择centos7 6、设置虚拟…...
利用Altair One 云平台，轻松实现全球企业产品研发创新与优化
在过去的几十年里，工程师和数据科学家引入了大量改变世界的技术，但他们的工作方式却出人意料地停滞不前。技术的革新也带来了效率的不断提升。 面对众多企业的同样难题，Altair整合产品，创造出了用于协作工程、数据工程和分析应用程…...
数据库树状查询
SQL Server 树状查询 -- 创建临时表或者使用CTE WITH OrganizationTree AS (-- 定义递归的终止条件SELECT id, parent_id, name, 1 AS LevelFROM org_structureWHERE parent_id IS NULLUNION ALL-- 定义递归部分，这里的Level是为了记录树的层级SELECT o.id, o.pare…...
【实战场景】@Transactional中使用for update的注意点
【实战场景】Transactional中使用for update的注意点 开篇词：干货篇：知识回顾注意点1.锁的范围和粒度：2.事务的隔离级别：3.死锁：4.性能影响：5.事务的边界：6.异常处理：7. 数据库和存储…...
好用的声音分析的软件和网站
有许多软件和网站可以帮助进行声音分析，从专业级的音频处理软件到在线工具，以下是一些推荐： 专业音频分析软件 Audacity 开源且免费的音频编辑和分析工具。提供基本的音频录制、编辑和分析功能。支持多种插件，扩展其功能。 Adob…...
开发情绪识别人工智能时的道德考量
情绪调节人工智能是机器学习领域的最新技术进步之一。尽管它显示出巨大的潜力，但道德问题将影响其采用率和寿命。人工智能开发人员能克服这些问题吗？ 什么是情绪识别人工智能？ 情绪识别人工智能是一种机器学习模型。它通常依赖于计算机视觉…...
MongoDB：基础语句及练习
一 基本命令 1.显示所有数据库 show dbs show databases 2.进入某个数据库 use 数据库名称 3.显示当前数据库信息 db.stats() 4.显示当前数据库的所有集合 show collections 5.显示当前数据库 db 在 MongoDB 里，数据库和集合都不用手动创建： 当使用“us…...
百度智能云创新业务部总经理李想：发挥AI企业科技创新优势 助力职业教育人才扬帆远航
前言：百度智能云教育行业解决方案作为百度智能云旗下的创新力量，专注于培养“AI教育”领域的新质生产力人才，一直以来备受职业教育领域的关注。在第六届人工智能“职教百强”院校长论坛开幕之际，中教全媒体对话论坛嘉宾百度智能云…...
了解股票沽空及其风险
什么是股票沽空？ 股票沽空是一种投资策略，投资者通过借入股票并在市场上卖出，期望在未来以更低的价格买回股票，以赚取价差收益。这一策略在市场下跌时尤为常见，因为投资者可以从股票价格的下跌中获利。 股票沽空的…...
【Sql Server修改列类型错误信息：对象名依赖于列】
Sql Server修改列类型错误信息：对象名依赖于列 报错信息解决方法测试sql语句 报错信息 修改表中列类型，发生报错如下： [SQL Server]对象DF__Forecast___isCal__4E746892 依赖于 列isCalcFinished。 (5074) [42000] [Microsoft][ODBC Driver…...
【ACM珠海分会，IEEE Fellow加盟，CPS出版】第四届管理科学和软件工程国际学术会议(ICMSSE 2024，7月19-21)
第四届管理科学和软件工程国际学术会议(ICMSSE 2024)由ACM珠海分会，广州番禺职业技术学院主办；全国区块链行业产教融合共同体，AEIC学术交流中心承办，将于2024年7月19-21日于广州召开。 会议旨在为从事管理与软件工程领域的专家学…...
kmeans.fit_predict 和 kmeans.fit有什么区别
KMeans 是 scikit-learn 库中用于执行 K-means 聚类算法的类。fit_predict 和 fit 是该类中的两个方法，的主要区别在于返回的内容和用途。 kmeans.fit: 用途: 用于训练 K-means 模型。输入: 接受一个特征矩阵（通常是二维数组）作为输入。输出:…...
香港优才计划续签难吗？一次性说清楚优才续签要求，不在香港居住也能续签成功！
香港优才计划续签难吗？这个问题对考虑申请优才的人来说，还是挺重要的。我们申请优才，最关注的2个问题，一个是获批，还有一个就是续签了。 毕竟我们费那么大功夫申请优才，可不只是为了一个为期3年的香港临时…...
react获取访问过的路由历史记录
看了下，好像没有很好的解决方案，之前的useHistory现在也用不了了， chatgpt说使用useMatch，也报错 看了下浏览器原生的。本来浏览器就会限制这个histroy的读取，只能获取length https://developer.mozilla.org/zh-CN/…...
基于深度学习的点云降噪
基于深度学习的点云降噪是一种利用深度学习模型处理三维点云数据，以去除噪声并恢复点云的原始形状和细节的方法。点云数据广泛应用于自动驾驶、机器人导航、3D扫描和虚拟现实（VR）等领域，因此高质量的点云数据处理至关重要。以下是…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
MySQL的pymysql操作
本章是MySQL的最后一章，MySQL到此完结，下一站Hadoop！！！ 这章很简单，完整代码在最后，详细讲解之前python课程里面也有，感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
前端开发者常用网站
Can I use网站：一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use：Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站：MDN JavaScript权威网站：JavaScript | MDN...
聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇
根据 QYResearch 发布的市场报告显示，全球市场规模预计在 2031 年达到 9848 万美元，2025 - 2031 年期间年复合增长率（CAGR）为 3.7%。在竞争格局上，市场集中度较高，2024 年全球前十强厂商占据约 74.0% 的市场…...
leetcode73-矩阵置零
leetcode 73 思路 记录 0 元素的位置：遍历整个矩阵，找出所有值为 0 的元素，并将它们的坐标记录在数组zeroPosition中置零操作：遍历记录的所有 0 元素位置，将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...