Style and Class binding improvements

vuejs / rfcs

RFCs for substantial changes / feature additions to Vue core

4.86k stars 548 forks source link

Style and Class binding improvements #194

Open CyberAP opened 4 years ago

CyberAP commented 4 years ago

Rendered

Introduce a couple of improvements to Style and Class bindings:

Secondary argument for direct prop-value bindings
```
<input :class:is-active="isActive">
```

Modifiers for secondary style arguments

<input :style:custom-property.prop="customPropertyValue">
<input :style:width.px="width">

posva commented 4 years ago

This was asked for before at https://github.com/vuejs/vue/issues/4956 Same for implicit prop values https://github.com/vuejs/vue/pull/2877

Given the existing syntax for directives (like v-bind) this introduces a custom attribute named class:property (property being dynamic) and a custom behavior for v-bind, which ironically helps to making things overcomplicated which is your first point in motivation

CyberAP commented 4 years ago

It does not introduce a custom attribute and is a syntax sugar for an existing object configuration for v-bind. That's why it said that users who use render functions won't be affected by this change.