웹/Vue.js

[Vue.js] v-bind

구하천포 2018. 11. 8. 19:40

v-bind

간단한 설명

앞으로 v: 를 많이 사용할 것입니다.
v: 가 의미하는 것은 쉽게 말하자면 vue에서 제공해주는 디렉티브라고 생각하시면 됩니다.

HTML 태그 속성에 vue 데이터를 binding을 한다.

사용법
v-bind:속성명="값"
:속성명="값"

코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id='app'>
        <!-- v-bind : 뷰에 있는 메세지를 title에 붙입니다. -->
        <span title="커서를 올렸습니다.">커서를 올리시오</span><br>
        <span v-bind:title="message">커서를 올리시오</span><br> 
        <!-- 줄여서 아래와 같이 사용을 합니다. -->
        <span :title="message">커서를 올리시오</span>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '커서를 올렸습니다.'
            }
        })
    </script>
</body>
</html>
cs

결과


저작자표시 비영리 변경금지