dearbeany
[Vue] v-bind 디렉티브로 이미지 속성 바꿔보기 본문
v-bind
- HTML의 요소인 id, class, style 등에 대해 model의 데이터(=Vue상태 데이터)를 연결할 때 사용된다. v-bind는 전달인자로 연결하려는 속성을 지정해주면 된다
v-bind:src 해당 이미지의 src를 vue instance의 'url' 속성으로 값을 최신상태로 유지하게 한다.
뷰인스턴스에서 이미지경로(고양이, 강아지)를 데이터로 전달해줘보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app-2">
<img v-bind:src="url1" />
<img :src="url2" />
</div>
<script>
const app2 = new Vue({
el : "#app-2",
data(){
return {
url1 : "/images/cat.jpg",
url2 : "/images/dog.jpg",
};
},
});
// app2.url1 = "/images/dog.jpg"
</script>
</body>
</html>
- url1은 고양이 사진을, url2는 강아지 사진으로 뷰인스턴스에서 속성값으로 각각의 이미지 경로를 지정해주었다.
- 실행할 경우 각각 사진이 로드되는 걸 확인 할 수 있다.
- 개발자도구를 확인하면, 코딩한 것과 다르게 <img> 태그에 src속성이 들어간 것을 확인할 수 있다
- 즉, ⓛ <img> 의 src속성값을 Vue.js를 통해 전달했다. 그리고 ②그 HTML코드는 브라우저를 통해 이미지를 렌더링하여 보여준 것이다.
v-bind:[attribute]=" " 디렉티브는 Vue.js를 통해 HTML의 속성값을 JS에서 동적으로 바인딩한다.
● 만약에 첫 번째 고양이 사진을 강아지 사진으로 모두 바꾸고 싶다면?
뷰 인스턴스를 생성하고 왜 값을 app2처럼 변수에 저장해놓는지 궁금했었는데...
뷰 인스턴스를 담은 app2의 url1 속성값을 '강아지 사진이 저장된 이미지 경로'로 값을 변경해주자!
app2.url1 = "/images/dog.jpg"
강아지 두 마리가 보인당 ㅎㅎ
'Vue.js' 카테고리의 다른 글
| [Vue] Vue Router 라우팅 | router-link와 router-view (0) | 2022.11.02 |
|---|---|
| [Vue] Vue Component 통신 | JS Module | Vue CLI 실행환경 구축 (0) | 2022.11.02 |
| [Vue] 이벤트 핸들링(v-on) | 바인딩(ref, v-bind, v-model) | 뷰 컴포넌트 (0) | 2022.11.02 |
| [Vue] 라이프사이클 | 뷰 인스턴스 옵션(methods, filter, computed, watch) (0) | 2022.10.31 |
| [Vue] Vue 옵션(el, data, methods) | 보간법과 디렉티브(v- once, text, bind, html, model, show, for, on) (0) | 2022.10.31 |
'Vue.js' Related Articles
more
