How to use Vue.js variable in style attribute?

Question

I need to find a way to use a VueJS variable in a style attribute, as example when I try something like <p style="color:[% randomColor() %];></p> it dissapears on my console.

Here's an example on fiddle : https://jsfiddle.net/Lindow/bjfvdgde/3/

HTML :

<div id="app">
    <p style="color:[% randomColor() %];">[% nameAttr() %]</p>
</div>

JavaScript :

var color = new Vue({
    el:'#app',
    methods:{
        nameAttr:function(){
          var name = 'John Doe';
          return name 
        },
        randomColor:function(){
            var font_color = "red";
            return font_color
        }
  },
  delimiters: ["[%","%]"]
});

How can I get around this problem ?

tony19 · Accepted Answer · 2022-07-15 22:13:55Z

4

<div id="app">
  <p :style="{color:randomColor()}">[% nameAttr() %]</p>
</div>

Comments

Kirill Matrosov · Accepted Answer · 2017-05-22 08:07:04Z

2

You should use v-bind:style directive

<p v-bind:style="{color:randomColor()}">[% nameAttr() %]</p>

answered May 22, 2017 at 8:07

Kirill Matrosov

6,0404 gold badges30 silver badges39 bronze badges

Comments

Blessing · Accepted Answer · 2020-11-23 08:49:06Z

1

I used the following snippet for setting the background of a div according to the current image.

:style="{'background-image':`url(${currentImg})`}

currentImg can be replaced by any variable name like myVariable

edited Nov 23, 2020 at 8:49

answered Nov 23, 2020 at 7:53

Blessing

2,76018 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to use Vue.js variable in style attribute?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related