vue.js组件内联样式串联

时间:2018-11-06 19:39:54

标签: javascript vue.js vue-component

我被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中的值没有#。所以我必须在模板中添加它。

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

任何帮助表示赞赏!

3 个答案:

答案 0 :(得分:1)

使用它,它利用vue的样式对象语法

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

答案 1 :(得分:1)

根据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}` }"

答案 2 :(得分:0)

在添加样式方面,您有几种选择。如果您使用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}`
        }
      }
    }
  }
}