728x90
반응형
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
window.onload = function(){
var test1 = new Vue({
el : '#test1',
data : {
a1 : '문자열1',
a2 : '문자열2',
a3 : '<h3>문자열3</h3>', //html태그 자체도 그냥 문자열로 인식을 해버림 : template로 인식하게 하려면?
a4 : 'image/pengsoo.jpg',
a5 : 300,
a6 : 200
}
})
}
</script>
</head>
<body>
<div id="test1">
<h3>{{a1}}</h3>
<h3>{{a2}}</h3>
<h3>{{a3}}</h3>
<div v-html = 'a3'></div> <!-- 이렇게 해야 html태그 인식가능-->
<img src = '{{a4}}'><br/>
<img v-bind:src = 'a4' v-bind:width='a5' v-bind:height='a6'><br/>
</div>
</body>
</html>vue객체에 데이터를 집어넣으면서, HTML 을 넣을 수 있다!
그러나.... 그냥 문자열처럼 똑같이 집어넣으면 리터럴리 문자열로 인식을 해버림.
그래서 v-html 을 넣고, data의 해당 번지를 지정하여 html 태그를 태그로 인식할 수 있도록 처리해줘야 한다.
이미지도 마찬가지로, 그냥 src에 넣어버리면 그냥 이미지 자리만 생기고, 아무 일도 벌어지지 않는다.
그래서 v-bind 를 사용하고, v-bind 뒤에 src , width, height 설정을 붙여야 한다.
이미지 경로는 일반 문자열처럼 똑같이 경로 지정해서 가져올 수 있음.
소스 까보면 똑같이 html에다 직접 넣은 것 처럼 보인다.
728x90
반응형
'study > Vue.js' 카테고리의 다른 글
| Vue.js watch computed : 캐시 메모리저장 여부 / 코드 복잡도 차이 (0) | 2022.06.07 |
|---|---|
| Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기 (0) | 2022.06.06 |
| Vue.js 객체할당과 이벤트 1: mount / destroy / v-on (0) | 2022.06.04 |
| 20220601 Vue.js 환경설정 ~ Vue 객체 이해하기 (0) | 2022.06.03 |
| Vue.js 카테고리 신설 (0) | 2022.06.01 |
댓글