Vue) 19. 뷰에서 style속성 데이터 바인딩하는 법..

지금까지의 간단한 구조 설명 )

최상단 컴포넌트(App.vue)에서 글 목록 데이터(boards.js)를 import 했다.

그 후, 포스트 화면을 감싸는 Container.vue 컴포넌트로 데이터를 props 한 다음에

Container.vue 안에 존재하는 Post.vue라는 게시글 하나를 보여주는 컴포넌트를 props 받은 데이터로 v-for 문으로 뿌려주었다.

마지막으로 또 다시 Container.vue로 props 받은 데이터를 Post.vue로 한번더 props 해서 각각의 게시물들의 데이터들을 바인딩하였다.

boards.js 데이터에는 유저프로필이나 글사진 주소가 존재하는데, style을 줄때 이러한 데이터를 바인딩해서 이미지를 보여줄 수 있는 방법 두가지를 준비했다.

방법1 )

<div
     class="profile"
     :style="{ backgroundImage: `url(${elBoards.userImage})` }"
></div>

방법2 )

<div
     class="post-body"
     :style="{ backgroundImage: 'url(' + elBoards.postImage + ')' }"
></div>