javascript - vue.js 组件内联样式串联

Question

我被 vue.js 组件内联样式串联所困扰。我的代码如下:

components: {
  'twitter-item': {
    props: ['procolors'],
    template: '\
      <div class="color-quadrat" v-bind:data-id="procolors.id" v-bind:style="background-color: #{procolors.user.profile_background_color}">\
      <p>{{procolors.user.profile_background_color}}</p>\
      </div>\
     '
  }
}

我正在尝试将 procolors.user.profile_background_color 作为内联背景颜色。特殊之处在于 procolors.user.profile_background_color 中的值没有 #。所以我必须将其添加到模板中。

我尝试了网络上的各种建议，但没有一个对我有用。

任何帮助表示赞赏!

Answer 1

使用这个，它利用了vue的style object syntax :

:style="{backgroundColor: '#' + procolors.user.profile_background_color}"