Subscribe on changes!

The binding of class is too messy

avatar
Mar 5th 2021

What problem does this feature solve?

The binding of class is too messy

Current usage:

1. variable. This matches the other features of vue

<div :class="activeClass">message</div>   
{activeClass: "active"}

2. Multiple variables, followed by variables will be treated as attributes

<div :class="activeClass,errorClass">message</div>   
{activeClass: "active", errorClass: "error"}
<div class="active" errorclass="error"></div>

3. json string. The property is a value, and the value is Boolean

<div :class="{ active: isActive }"></div>
{isActive: true}

4. object. The property is a value, and the value is Boolean

<div :class="classObject"></div>
{classObject:{active: false, 'text-danger': true}}

5. array. The value is a variable

<div :class="[activeClass,errorClass]"></div>
{activeClass: 'active', errorClass: 'text-danger'}

6. Multi array. The value is a variable. The json string is the same as 3

<div :class="[{ active: isActive }, errorClass]"></div>
{isActive: true, errorClass: 'text-danger'}

What does the proposed API look like?

Why not make it simpler?Only the variable and @value. If there is a value, the variable is the Boolean.Multiple with "," separated.This is more in line with the simple consistency of vue

<div :class="activeClass">message</div>   
{activeClass: "active"}

<div :class="isActive@active">message</div>  
{isActive: true}
avatar
Mar 5th 2021

Thank you for your timely reply, for some reason, I can't pay attention to github very often. If you think this feature is good and helpful, you can submit rfcs between them between them. Thank you very much.

avatar
Mar 5th 2021

Hi @lafpub , first of all, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow. If you are requesting new features, you should go through an RFC, https://github.com/vuejs/rfcs