javascript - 如何在样式属性中使用 Vue.js 变量？

Question

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

这是一个关于 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: ["[%","%]"]
});

我怎样才能解决这个问题？

Answer 1

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

在这里阅读更多:vue website