HTML 엘리먼트의 속성을 설정할 땐??
머스태쉬 태그 {{}} 를 이용해서 name 값을 설정했었다.
HTML 태그 안의 내용을 Vue 인스턴스 안의 데이터값으로 설정 할 수 있었다
HTML 태그의 속성값을 데이터값을 사용해야한다면 어떻게 해야할까
예를 들어 <img src="링크"/>의 src 속성값에 Vue 인스턴스의 데이터값을 사용해야한다면?? v-bind디렉티브를 사용해야한다.
사용하기
사용법은 간단하다.
<img v-bind:src="속성의 이름">와 같은 형식으로 사용한다
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h1>Hello {{name}}</h1>
<img v-bind:src="sayHello" alt=""/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>var app = new Vue({
el: "#app",
data: {
name : "Vue",
sayHello: 'https://www.himgs.com/imagenes/hello/social/hello-fb-logo.png'
}
});조금 더 간단하게 사용하기
편의를 위해 v-bind를 생략 할 수 있다.
콜론 뒤에 속성의 이름만 넣어주면 된다
:src 이렇게 말이다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h1>Hello {{name}}</h1>
<img :src="sayHello" alt=""/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>var app = new Vue({
el: "#app",
data: {
name : "Vue",
sayHello: 'https://www.himgs.com/imagenes/hello/social/hello-fb-logo.png'
}
});위와같이 작성해도 첫번째 코드와 같은 결과가 나온다.
자바스크립트 표현식
머스태쉬 태그나 디렉티브를 사용할 때 그 내부의 값이 꼭 데이터명이 될 필요는 없다. 아래 경우와 같이 자바스크립트 표현식을 사용 할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h1>Hello {{name}}</h1>
<h2>{{Date()}}</h2>
<img :src="sayHello" alt=""/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>머스태쉬 태그안에 Date() 를 입력하여 현재의 시각이 나타나도록 했다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h1>Hello {{name}}</h1>
<h2>{{Date()}}</h2>
<img :src="hi ? sayHello : sayGoodBye" alt=""/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>var app = new Vue({
el: "#app",
data: {
name : "Vue",
hi : true,
sayHello: 'https://www.himgs.com/imagenes/hello/social/hello-fb-logo.png',
sayGoodBye: 'https://st2.depositphotos.com/1896403/6729/i/950/depositphotos_67297861-stock-photo-time-to-say-goodbye-message.jpg'
}
});위 코드는 Vue 인스턴스의 hi값을 참조하여 hi가 true이면 Hello 사진을 보여주고 hi가 false이면 goodbye 사진을 보여준다.
마무리
여태까지 데이터를 콘솔로만 변경하였는데 나중에 이벤트 핸들링을 배운다면 토글버튼이나 입력값으로 데이터를 바꿀수 도 있으니 좀만 참고 열심히 배웁시다.
