如何在樣式屬性中使用 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