Vue Class与Style绑定

本文介绍了Vue中如何使用v-bind动态绑定元素的class列表和内联样式。Vue为v-bind:class提供了对象和数组语法,允许我们更方便地根据数据动态切换样式。在对象语法中,可以传入对象来切换class,而在多条件情况下,可以结合数组语法与对象语法使用。
摘要由CSDN通过智能技术生成

①数据绑定一个常见需求是操作元素的class列表和它的内联样式,因为它们都是属性,我们可以用  v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时,Vue.js专门增强了它,表达式的结果类型除了字符串之外,还可以是对象或数组。

②绑定HTML Class

   对象语法:

      我们可以传给  v-bind:class  一个对象,以动态地切换class

<div v-bind:class = "{active:isActive}"></div>
     上面的语法表示class active 的更新将取决于数据属性 isActive 是否为真值。
     此外,v-bind:class指令可以与普通的class属性共存:
<div class = "static"
   v-bind:class = "{active:isActive,'text-danger':hasError}&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值