Vue.js绑定HTML class数组语法错误(官网错误,同学可以上github上改一下)

本文介绍了Vue.js中条件Class绑定的正确用法,特别是如何使用数组和对象语法结合的方式,来简化复杂条件下的样式绑定,并修复了官网教程中的一个小错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue.js绑定HTML class数组语法错误(官网错误,同学可以上github上改一下)

昨天在官网教程上发现一个错误是这样的,下面看图

http://cn.vuejs.org/guide/class-and-style.html

当有多个条件class时这样写有些繁琐。在1.0.19+中,可以在数组语法中使用对象语法:

如果这样写是可以执行成功的,但有错误

data: {

    classA: 'class-a',

    classB: 'class-b',

    classC: 'class-c',

    isB: true,

    isC: false

}

<div :class="[classA, { classB: isB, classC: isC }]">

渲染为:

<div class="class-a classB">

如果是短横符这样的 class-b 是不成功的,所以这里还是要用标准的对象语法加上引号

<div :class="[classA, { 'class-b': isB, 'class-c': isC }]">

渲染为:

<div class="class-a class-b">

转载于:https://my.oschina.net/af666/blog/760483

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值