ETC/Vue.js
v-html / v-bind vue 코드에 html 코드 삽입
java나유
2022. 12. 19. 22:09
- 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