본문 바로가기
ETC/Vue.js

v-html / v-bind vue 코드에 html 코드 삽입

by java나유 2022. 12. 19.
  • 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

댓글