如何使用 Vue.js样式属性中的变量

Question

我需要找到一种方法在样式属性中使用 VueJS 变量，例如当我尝试类似的东西时<p style="color:[% randomColor() %];></p>它在我的控制台上消失了。

这里有一个关于小提琴的例子： 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: ["[%","%]"]
});

我该如何解决这个问题？

Answer 1

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

在这里阅读更多： vue 网站

Answer 2

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

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

Answer 3

我使用以下代码片段根据当前图像设置div 的背景。

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

currentImg 可以替换为任何变量名称，如 myVariable