- v-html : 지정된 데이터를 html코드로 인식하여 바인딩한다.
- v-bind : 지정된 데이터를 지정된 속성 값으로 설정한다.
*v-html
<script>
window.onload = function(){
var test1 = new Vue({
el : '#test1',
data : {
a1 : '문자열1',
a2 : '문자열2',
a3 :'<h3>문자열</h3>'
}
})
}
</script>
</head>
<body>
<div id = "test1">
<h3>{{a1}}</h3>
<h3>{{a2}}</h3>
<h3>{{a3}}</h3>
<h3 v-html='a3'></h3>
</div>
</body>
</html>
*v-bind
<script>
window.onload = function(){
var test1 = new Vue({
el : '#test1',
data : {
a1 : '문자열1',
a2 : '문자열2',
a3 :'<h3>문자열</h3>',
a4 : 'img/logo.png',
a5 :300,
a6: 200
}
})
}
</script>
</head>
<body>
<div id = "test1">
<h3>{{a1}}</h3>
<h3>{{a2}}</h3>
<h3>{{a3}}</h3>
<h3 v-html='a3'></h3>
<img v-bind:src= 'a4' v-bind:width='a5' v-bind:height='a6'/>
</div>
728x90
'ETC > Vue.js' 카테고리의 다른 글
| v-bind + 이벤트 핸들링 정리잘하신 블로그 (1) | 2022.12.21 |
|---|---|
| v-for 태그를 반복할 수 있다 (0) | 2022.12.19 |
| beforeCreate / created Vue 생성주기 (0) | 2022.12.19 |
| Vue 시작은 객체 생성부터, function () { [native code] } 오류 (0) | 2022.12.18 |
| Vue 출력 오류 / Vue2 Vue3 default 문제 에러 {{}}가 안 먹을 때 (0) | 2022.12.18 |
댓글