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 ?

Answer 1

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

Read more here: vue website

Answer 2

你应该使用v-bind:style指令

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

Answer 3

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