배경을 v 바인딩하는 방법?

Question

임 이런 일을하려고 :

<div class="seller_image" :style="{background: url(' + user_credentials.avatar +'); background-size: cover !important; display:block;}"> 

을하지만 난이 오류를 얻을 :

Invalid expression. Generated function body: {background:scope.url(' + user_credentials.avatar +');scope.background-scope.size:scope.cover!scope.important;scope.display:scope.block;}

어떤 제안을?

이 그것의 작업처럼

하지만 난 배경 이미지처럼 사용하려면 :

new Vue({ 
    el: '#app', 
    computed: { 
    getBackground() { 
     return 'background: url(' + this.user_credentials.avatar + '); background-size: cover display:block;'; 
    } 
    }, 
    data: { 
    user_credentials: { 
     avatar: 'avatar.png' 
    } 
    } 
}) 

이 그럼 당신은 사용할 수 있습니다

<img v-bind:src="user_credentials.avatar" alt="Avatar" /> 

Answer 1

그것은 계산 대신 내부에서 이것을 함께 넣어 쉽게 그것과 같이 :

<div :style="getBackground"></div> 

다음

년대 JSFiddle :

https://jsfiddle.net/w6agzuen/

Answer 2

오류는 background 값이 문자열이어야하기 때문에 발생합니다. 추가 인라인 스타일은 객체를 전달하기 때문에 쉼표로 구분해야합니다. 마지막으로 하이픈을 포함하는 background-size과 같은 스타일은이를 바인딩 할 때 낙타 케이스가되어야하므로 인라인 스타일의 최종 변경 사항은 다음과 같아야합니다.