v-bind动态属性绑定

已于 2022-04-24 12:18:48 修改
阅读量1.3k 收藏
点赞数
分类专栏： vue 文章标签： vue.js
于 2022-04-24 11:04:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68546350/article/details/124377050
版权

1.基本使用

 <div  :class="['bdtop' , 'bdbottom']"></div>

未使用v-bind指令的class属性的值是一个字符串

使用v-bind指令的class属性值不在是字符串,而是表达式, 表达式里的值不是一个普通的字符,而是一个变量,Vue实例data属性中的数据,使用:简写
2.动态绑定多个class属性
2.1数组绑定
有的时候我们希望可以在一个DOM元素上动态绑定多个类名,因为动态绑定的class值是表达式,我们可以利用数组来多个动态绑定的类名,因此可以 v-bind:class动态绑定class值使用数组来绑定多个class类名

  <div  :class="['bdtop' , 'bdbottom']"><
最低0.47元/天 解锁文章
pink.815
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue学习笔记_03】v-bind动态绑定属性
weixin_44752429的博客
11-25 865
【Vue学习笔记_03】v-bind动态绑定属性v-bind基本使用v-bind动态绑定class对象语法（很常用）数组语法v-bind动态绑定style对象语法数组语法 配套可执行代码示例 => GitHub 在标签的属性前加v-bind:，可以简写为:，属性值就不再是固定值，而是动态绑定的了。 v-bind基本使用 <div id="app"> <img v-bind:src="imgUrl"> <!--简写--> <a :href="aUrl
v-bind动态绑定属性（一）
weixin_54327001的博客
10-27 483
如果觉得颜色和字体大小写进属性太长，可以使用methods方法添加函数。如果变量写成纯数字，那可以这样手动加上px，同样会起效果。写作finalSize:100无效果，需要单位px。不把大小写死，改为变量。
【Vue】`v-bind` 指令详解：动态绑定属性的强大工具
最新发布
lph159的博客
07-19 746
v-bind是 Vue.js 提供的指令之一，用于动态绑定 HTML 属性。它的基本语法如下：
v-bind动态绑定
weixin_52580677的博客
01-06 356
v-bind的基本使用 语法糖（缩写） ： 标签内引用data中的数据，需要加上v-bind <template> <div id="app"> <img v-bind:src="img" alt=""> <a :href="url"></a> </div> </template> <script> export default { name: 'app', data() {
v-bind动态绑定属性
MrX_YOUNG的博客
06-10 360
有时候我们希望将某些属性进行动态绑定 比如a元素的href属性 比如img元素src属性 在这些时候，我们可以使用v-bind指令 作用：动态绑定属性 缩写（语法糖）：： 基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
【3】`v-bind` 的一个重要特点是它会动态地将父组件的属性值绑定到子组件，这意味着如果父组件的属性值发生变化，子组件接收到的值也会相应更新。如果没有使用 `v-bind`，则子组件只能接收静态的字符串值，无法响应...
v-bind动态绑定属性、v-for和v-bind结合
m0_59707151的博客
05-19 208
1.v-bind动态绑定class 1.1 v-bind动态绑定class(对象用法) .active{ color: red; } ​<div id="app"> <!-- <h2 :class="{active:isactive}">改变class</h2> --> <h2 :class="getactive()">改变class</h2> <button type="button" @click="c
一文读懂vue动态属性数据绑定（v-bind指令）
11-20
v-bind的基本用法 一、本节说明 前面的章节我们学习了如何向页面html标签进行插值操作，那么如果我们想动态改变html标签的属性，该怎么办呢？ 这就是我们这节开始要讲的内容v-bind. 二、 怎么做 “:”为v-bind的简写形式，也可称为语法糖 三、 效果 四、 深入 在上图中将a标签的href属性值设置为toutiao，VUE实例将自动去data里面寻找toutiao属性进行值绑定。 不只是a标签，所有的html标签属性都可以通过v-bind进行值绑定，然后通过改变数据动态改变它的属性值。 错误的写法 注意一下：初学者容易犯错,这样写是错误的，v-bind:h
2、V-bind-动态绑定属性
weixin_44122135的博客
12-07 158
V-bind 1、动态绑定class属性 *通过对象 *通过数组 <!-- 点击按钮切换字体颜色 通过类名动态修改字体颜色 *通过对象添加 *使用数组添加 *分别封装成函数添加 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con
v-bind 的动态绑定语法
Z13955558735的博客
05-19 181
1.v-bind:class 动态绑定 class对象 需要先绑定一个class对象{active: isActive} 任何名都可以 在设置键 active 的一个style 属性，用 值 isActive 为 true 去渲染 切换也就是取反 isActive <style> .active{ color: red; } </style> </head> <body>
vue - v-bind动态绑定属性
asfcyg的博客
06-20 2292
v-bind基本使用 作用：动态绑定指令 语法糖：: 预期：any(with argument)，任意参数 | Object(without argument)，对象 参数：attrOrProp(optional) v-bind:title='doubi' v-bind是指令 title是参数 doubi是预期值 v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值 在开发中需要动态绑定的属性：图片的src、网站的href、动态绑定一些类、样式等 data: { li
5. v-bind动态绑定
香菜的博客
01-20 327
1. v-bind动态绑定属性 <body> <div id="app"> <!-- 错误的做法: 这里不可以使用mustache语法 只能在标签内容这里才可以使用mustache语法 <img src="{{imgURL}}" alt=""> --> <!-- 正确做法 使用v-bind指令--> <img v-bind:src="imgU
vue中v-bind动态绑定
nanzai11111的博客
10-08 387
v-bind指令 除了内容需要动态绑定之外，我们元素的某些属性也需要动态的绑定，比如<img src=""/>或者<a href=""></a>里面的图片路径或者网址路径一定不是写死的，是需要随着请求来的数据而随之改变的。 这就会用到我们的v-bind指令了。 -- 正常的做法就是，使用v-bind指令--> <img v-bind:src="imgURL"> <a v-bind:href = "webURL">webstrom快
使用v-bind动态绑定多个属性
alice9999999的博客
08-08 1058
v-bind动态绑定属性
Vue v-bind动态绑定及内部指令
javascipt____的博客
07-13 882
v-bind动态绑定 v-bind基本用法及语法糖，主要用于动态更新HTML 元素属性，接下来简单回顾下。 v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改 变任一方数据后都会实时更新。 对象语法格式 数组语法格式”绑定类名” 除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。例如： class-数组语法-普...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值