v-html : 지정된 데이터를 html 코드로 인식하여 바인딩한다.

v-bind : 속성명 : 지정된 데이터를 지정된 속성 값으로 설정한다.


v-html


참조값 a3를 출력하면 HTML태그가 그대로 문자열로 출력이 되는걸 볼 수 있다.

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
28
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
    <div id="test1">
        <h1>{{ a1 }}</h1>
        <h1>{{ a2 }}</h1>
        <div>{{ a3 }}</div>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    window.onload = function(){
        var test1 = new Vue({
            el : '#test1',
            data :{
                a1 : '문자열1',
                a2 : '문자열2',
                a3 : '<h3>문자열3</h3>'
            }
        });
    }
</script>
</body>
</html>
cs
결과

HTML로 출력하려면 

1
<div v-html='a3'></div>
cs



결과 : 

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
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
    <div id="test1">
        <h1>{{ a1 }}</h1>
        <h1>{{ a2 }}</h1>
        <div v-html='a3'></div>
        <img src='{{a4}}'><br/>
        <img v-bind:src='a4' v-bind:width='a5' v-bind:height='a6'>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    window.onload = function(){
        var test1 = new Vue({
            el : '#test1',
            data :{
                a1 : '문자열1',
                a2 : '문자열2',
                a3 : '<h3>문자열3</h3>',
                a4 : 'logo.png',
                a5 : 300,
                a6 : 200
            }
        });
    }
</script>
</body>
</html>
cs

결과




저작자표시

'Vue' 카테고리의 다른 글

computed  (0) 2019.07.31
Watch  (0) 2019.07.31
컴포넌트 (전역 컴포넌트와 지역 컴포넌트)  (0) 2019.07.30
라이프 사이클  (0) 2019.07.30
CDN으로 Vue 사용하기, 인스턴스 만들기 연습  (0) 2019.07.29

+ Recent posts

티스토리툴바