Question

我想从方法中向html元素添加一些样式：

<div class="add-profile-img" v-bind:style="getBackgroundImg()">

方法是：

getBackgroundImg: function() {
return {   
    width: 180px; 
    height: 180px; 
    background-color: 'yellow';
    background-image:url(this.BASE_URL +'/uploads/noimg.gif');
    }
},

但是，我得到

Syntax Error:   Identifier directly after number (79:13)

  77 |      getBackgroundImg: function() {
  78 |          return {   
> 79 |          width: 180px; 
     |                    ^

我该如何解决？

Answer 1

以像素为单位的尺寸必须为字符串格式，以便函数返回有效的javascript对象：

return {   
    width: '180px', 
    height: '180px',
    'background-color': 'yellow',
    'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
}

Answer 2

请问您为什么要这么做？据我所知，如果您绑定样式，只需在数据对象中创建对象，别忘了使用适用于javascript的样式sintax。（驼色）

data(){
    return{
        yourStyleVariable: {
            backgroundColor: 'red'
        }
    }
}

Vue.js无法从方法添加样式

2 个答案: