5

In vue there are a couple ways to bind a property to an html tag. For example

<span v-bind:style="style"></span>

Where style exists in the current controller, either as a property or as the component data.

A shorter way to do this is to use the v-bind shorthand:

<span :style="style"></span>

I was wondering if there was a shorter way of doing this, or if there is something similar coming in vue 3, something like this I would like:

<span :style></span>

Is this possible?

4
  • 1
    This is not possible as of now and not sure about Vue 3 also, as a stable version is not released yet.
    – palaѕн
    Jul 1, 2020 at 16:04
  • You can do something like that with Vue directives. I created a snippet as an answer using directives. Jul 1, 2020 at 18:22
  • @muka.gergely's comment is missleading as he did NOT correctly understand the question at hand. So folks, don't bother with his answer further down the list.
    – aefxx
    Jul 18, 2021 at 12:10
  • 1
    @santiago arizti I was looking for the exact same shorthand ... now that makes two of us :D
    – aefxx
    Jul 18, 2021 at 12:12

2 Answers 2

3

Edit July 2022:

I tried an even shorter version in the official playground and it works. Just use :="{attr}" and it works. I have not seen this syntax referenced in the docs so I don't know how official this is. You can even omit the double quotes as it is valid html, but the style guide frowns upon that.

<span :={style}></span>

See it in action in the sfc playground.

Note: playground version ATTOW @8dcb6c7


Original Answer:

My best solution so far is to use v-bind

<span v-bind="{style}"></span>

It allows you to pass multiple properties at once and then you actually save space, see for example how an img looks like

<img v-bind="{alt, src, title}" />
2
  • Does it work on Vue 2 too? I saw that sfc.vuejs.org only has Vue 3 playground.
    – deekeh
    Jul 18, 2022 at 15:53
  • 1
    I tested wit Vue 2.7 with jsfiddle and there was an error ": is not a valid attribute name". I tried both with DOM templates and string templates. I didn't try with a bundler with the vue compiler. Jul 19, 2022 at 22:18
-1

For that to work you'd need to write your own directive:

Vue.directive('style', {
  bind: function(el) {
    el.classList.add('style')
  }
})

new Vue({
  el: "#app"
})
.style {
  font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-style>This is styled.</div>
  <div>This is not styled.</div>
  <div v-style>This is styled again.</div>
</div>

More on Vue directives: https://v2.vuejs.org/v2/guide/custom-directive.html

2
  • 2
    This doesn't actually implement what the question asks for.
    – tony19
    Jul 1, 2020 at 21:13
  • thanks for the input, perhaps the answer is that there is no way to do this. I was lookinf for a generalized way of passing parameters with same name, kind of how object shorthand works: const name="myname"; const obj = {name}; Jul 8, 2020 at 1:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.