CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2
Horai Nuri
Horai Nuri

Reputation: 5568

How to use Vue.js variable in style attribute?

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 ?

Upvotes: 0

Views: 4803

Answers (3)

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

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

Read more here: vue website

Upvotes: 4

Blessing
Blessing

Reputation: 2720

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

Upvotes: 1

Kirill Matrosov
Kirill Matrosov

Reputation: 5990

You should use v-bind:style directive

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

Upvotes: 2

Related Questions