Vue模版语法之属性绑定v-bind

双大括号不能在 HTML 属性中使用。想要响应式地绑定一个属性,应该使用 v-bind 指令
1. 使用v-bind绑定属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新建页面</title><script type="text/javascript" src="./vue.global.js"></script>
</head>
<body><div id="root"><!--使用v-bind进行属性绑定--><div v-bind:id="name"></div><!--使用v-bind进行属性绑定(简写形式)--><div :id="name"></div><!--使用v-bind进行属性绑定(定义属性名称和html中属性名称相同的简写形式)--><div :name></div></div>
</body>
</html>
<script type="text/javascript">const { createApp, reactive } = VuecreateApp({data(){return{name:'id'}}}).mount('#root')
</script>

在这里插入图片描述
2. 布尔型绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一个简单的按钮是否可以点击案例</title><script type="text/javascript" src="./vue.global.js"></script>
</head>
<body><div id="root"><!--使用v-bind进行属性绑定,true/false/''时属性生效情况--><!--true时属性生效--><button :disabled="isTrue">Button</button><!--''时属性生效--><button :disabled="isNull">Button</button><!--false时属性不生效--><button :disabled="isFalse">Button</button></div>
</body>
</html>
<script type="text/javascript">const { createApp } = VuecreateApp({data(){return{isTrue:true,isNull:'',isFalse:false}}}).mount('#root')
</script>

在这里插入图片描述
3. 动态绑定多值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一个简单的按钮是否可以点击案例</title><script type="text/javascript" src="./vue.global.js"></script>
</head>
<body><div id="root"><!--使用v-bind进行动态多属性绑定,同时绑定id和name属性--><div v-bind="objectOfAttrs">Button</div></div>
</body>
</html>
<script type="text/javascript">const { createApp } = VuecreateApp({data() {return {objectOfAttrs: {id: 'ids',name: 'names'}}}}).mount('#root')
</script>

在这里插入图片描述
4. 使用Javascript绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一个简单的按钮是否可以点击案例</title><script type="text/javascript" src="./vue.global.js"></script>
</head>
<body><div id="root"><!--使用v-bind进行属性绑定,属性值部分使用javascrip值--><div :id="`list-${id}`">Button</div></div>
</body>
</html>
<script type="text/javascript">const { createApp } = VuecreateApp({data() {return {id: 'ids'}}}).mount('#root')
</script>

在这里插入图片描述
5. 动态设置v-bind的属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一个简单的按钮是否可以点击案例</title><script type="text/javascript" src="./vue.global.js"></script>
</head>
<body><div id="root"><!--使用v-bind进行属性绑定,动态指定属性名称--><div :[attributename]="id">Button</div></div>
</body>
</html>
<script type="text/javascript">const { createApp } = VuecreateApp({data() {return {id: 'ids',attributename:'name'}},}).mount('#root')
</script>

在这里插入图片描述

  1. 调用函数绑定(暂未研究)
<time :title="toTitleDate(date)" :datetime="date">{{ formatDate(date) }}
</time>

绑定在表达式中的方法在组件每次更新时都会被重新调用,因此不应该产生任何副作用,比如改变数据或触发异步操作。

模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象,比如 Math 和 Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问,例如用户附加在 window 上的属性。然而,你也可以自行在 app.config.globalProperties 上显式地添加它们,供所有的 Vue 表达式使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/692724.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java中23种设计模式-单例模式--饿汉式】

加油&#xff0c;新时代打工人&#xff01; 简单粗暴&#xff0c;直接上代码。 23种设计模式定义介绍 Java中23种设计模式-单例模式 Java中23种设计模式-单例模式2–懒汉式线程不安全 Java中23种设计模式-单例模式2–懒汉式2线程安全 package mode;/*** author wenhao* dat…

一个PDF处理利器的.Net开源项目

在项目开发中&#xff0c;处理PDF文件是一个非常常见的需求&#xff0c;之前也推荐几个&#xff0c;今天继续给大家推荐一个强大且易于使用的开源库&#xff0c;专门用于处理PDF文件&#xff0c;它提供了一系列功能强大的工具&#xff0c;帮助开发人员轻松地解析、修改和创建PD…

【蓝桥杯基础】1.7星系炸弹

问题 在X星系的广袤空间中漂浮着许多X星人造“炸弹”&#xff0c;用来作为宇宙中的路标。 每个炸弹都可以设定多少天之后爆炸。 比如&#xff1a;阿尔法炸弹2015年1月1日放置&#xff0c;定时为15天&#xff0c;则它在2015年1月16日爆炸。 有一个贝塔炸弹&#xff0c;2014年…

基于物联网智慧公厕的多功能城市智慧驿站

在现代城市发展中&#xff0c;智慧化已经成为了一个不可或缺的趋势。而多功能城市智慧驿站&#xff0c;作为智慧城市建设的一部分&#xff0c;以物联网智慧公厕为基础&#xff0c;集合了诸多功能于一身&#xff0c;成为了城市中不容忽视的存在。多功能城市智慧驿站也称为轻松的…

Spring Cloud部署篇1——Jar包部署至CentOS云服务器

一、项目介绍 系统模块 com.mingink |--mingink-api // 接口模块 | └──mingink-api-system // 系统接口 |--mingink-common // 通用模块 | └──mingink-common-core // 系统接口 |--mingink-gateway…

shapely 笔记:STR TREE

数据结构笔记&#xff1a;R树-CSDN博客 1 基本介绍 使用Sort-Tile-Recursive (STR) 算法创建的仅查询的R-tree空间索引该树索引每个几何图形的边界框。树在初始化时直接构建&#xff0c;且一旦创建后不能添加或移除节点所有操作返回输入几何图形的索引边界框限于二维并且是轴…

前端常见面试题之vue2

文章目录 一、vue2中父子组件嵌套时的生命周期执行顺序是怎样的1. 挂载阶段2. 更新阶段3. 销毁阶段 二、vue组件通讯方式有哪些1. 父子组件通讯方式(1). Props 和 Events&#xff1a;父组件通过props向子组件传递数据&#xff0c;子组件通过事件向父组件传递数据。(2). $parent…

[word] word定时自动保存功能的作用是什么 #知识分享#学习方法#媒体

word定时自动保存功能的作用是什么 word定时自动保存功能的作用是什么 这是word提供的一个保护用户文档的功能&#xff0c;一般情况下是为了预防在未知原因的情况下&#xff0c;用户电脑关闭&#xff0c;或者不小关掉Word&#xff0c;导致正在使用的文档丢失&#xff0c;给用户…

nginx的功能以及运用

nginx与apache的对比 nginx优点 nginx使用场景 编译安装nginx过程 1.先清空opt文件夹 2.关闭防火墙&#xff0c;关闭防护 3 安装依赖包&#xff0c;可以通过本地yum去安装 首先就是挂载&#xff0c;随后切换到配置文件中修改 4本地配置文件配置内容 5 随后安装环境包 yum -y …

洛谷 P1241 括号序列 (Java)

洛谷 P1241 括号序列 (Java) 传送门&#xff1a;P1241 括号序列 题目&#xff1a; 括号序列 题目描述 定义如下规则&#xff1a; 空串是「平衡括号序列」若字符串 S S S 是「平衡括号序列」&#xff0c;那么 [ S ] \texttt{[}S\texttt] [S] 和 ( S ) \texttt{(}S\textt…

uniapp运动课程健身打卡系统微信小程序

考虑到实际生活中在我来运动管理方面的需要以及对该系统认真的分析,将系统分为小程序端模块和后台管理员模块&#xff0c;权限按管理员和用户这两类涉及用户划分。 (a) 管理员&#xff1b;管理员使用本系统涉到的功能主要有&#xff1a;首页、个人中心、用户管理、课程类别管理…

Python爬虫之图形验证码的识别

爬虫专栏&#xff1a;http://t.csdnimg.cn/WfCSx 前言 目前&#xff0c;许多网站采取各种各样的措施来反爬虫&#xff0c;其中一个措施便是使用验证码。随着技术的发展&#xff0c;验证码的花样越来越多。验证码最初是几个数字组合的简单的图形验证码&#xff0c;后来加入了英…

Java学习25--自定义异常

自定义异常class 自定义异常通常要配合 override “toString”命令&#xff0c;其实质是一个会报错的method,像一个交通违章通报LED&#xff0c;但何时被触发&#xff0c;如何算是违反交通&#xff0c;并不会在此class定义。 自定义异常class的步骤&#xff1a; 自建个异常类…

机械臂目标抓捕学习笔记【1】

基于概率量度的机械臂视觉伺服目标捕获运动规划方法 目录 基于概率量度的机械臂视觉伺服目标捕获运动规划方法期望轨迹序列状态转移函数系统测量值模型线性化卡尔曼滤波状态估计代价函数-闭环反馈轨迹误差方差误差几何化表示到达概率计算 参考文献&#xff1a;《[1]祁若龙,邵健…

直接查看电脑几核芯几线程的方法

之前查看电脑几核芯几线程时都是点击 此电脑->属性->设备管理器->处理器 但是这样并不能判断是否有多线程 譬如这里&#xff0c;是2核芯2线程还是4核芯&#xff1f; 实际上&#xff0c;打开任务管理器后点击性能查看核芯线程数即可 所以示例这台电脑是4核芯而不是2…

鸿蒙实战:ArkTs 开发一个鸿蒙应用

学习过的 ArkTs 知识点&#xff0c;一步一步开发一个小的鸿蒙应用示例&#xff0c;涉及到 ArkTs 语法、注解 Entry 、 Component、state、路由、生命周期、Prop、 Link 、常用组件的使用等等知识点。 要开发一个鸿蒙应用&#xff0c;首先我们需要知道 系统是如何找到页面的启…

仪表板展示|DataEase看中国:历年研究生报考数据分析

背景介绍 在信息时代的浪潮中&#xff0c;研究生教育作为培养高层次专业人才的重要通道&#xff0c;不断吸引着广大毕业生和在职人士的关注。今天我们结合2018年&#xff5e;2024年的研究生报考数据&#xff0c;以数字为镜&#xff0c;深入了解近年来研究生培养态势。 本文将…

YOLOv8改进 | 进阶实战篇 | 利用辅助超推理算法SAHI推理让小目标无所谓遁形(支持视频和图片)

欢迎大家订阅我的专栏一起学习YOLO! 一、本文介绍 本文给大家带来的是进阶实战篇,利用辅助超推理算法SAHI进行推理,同时官方提供的版本中支持视频,我将其进行改造后不仅支持视频同时支持图片的推理方式,SAHI主要的推理场景是针对于小目标检测(检测物体较大的不适用,…

IP详细地理位置查询:技术原理与应用实践

IP地址是互联网上设备的唯一标识&#xff0c;在网络安全、个性化服务等领域具有重要意义。通过IP详细地理位置查询&#xff0c;可以获取到IP地址所在地的具体信息&#xff0c;为网络管理、定位服务等提供支持。IP数据云将深入探讨IP详细地理位置查询的技术原理、应用实践以及相…

Linux——进程替换

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、进程程序替换1、替换原理2、替换函数3、函数解释4、命名理解 二、用例测试1、execl测试2、…