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 =“ {backgroundColor：'＃'+ procolors.user.profile_background_color}”

Answer 2

根据Binding inline styles文档的介绍，有几种方法可以传递内联样式-作为对象或数组。

在您的示例中，background-color: #{procolors.user.profile_background_color}既不是对象也不是数组。

出于可读性和可维护性（以及一般的良好做法）的考虑，我建议创建一个计算属性，该属性将返回具有内联样式的对象。这样，将更清楚级联的问题在哪里：

模板将如下所示：

 <div 
     class="color-quadrat" 
     :data-id="procolors.id"
     :style="itemStyles">

     <p>{{ procolors.user.profile_background_color }}</p>
  </div>

并且应将计算属性添加到同一组件中

props: ['procolors'],
template: `...`,
computed: {
  itemStyles () {
    return {
      backgroundColor: `#${this.procolors.user.profile_background_color}`
    }
  }
}

如果您仍然希望保持内联，则应将样式绑定更改为以下内容：

v-bind:style="{ backgroundColor: `#${procolors.user.profile_background_color}` }"

Answer 3

在添加样式方面，您有几种选择。如果您使用v-bind:style="..."或简写:style="..."，则需要传递有效的字符串，有效的变量或有效的对象。

当前，您正在尝试将background-color: #{procolors.user.profile_background_color}解析为JavaScript，这将无法正常工作。

您可以使用javascript模板创建字符串：

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>\
     '
  }
}

将其重构为使用变量或函数通常更易读：

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

vue.js组件内联样式串联

3 个答案: