반응형
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05
이전 강좌
2022.12.25 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04
Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04
Vue.js 강좌 사용가능한 데이터형과 종류 04 이전 강좌 2022.12.24 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 텍스트 바인딩, 데이터 표시 03 Vue.js 강좌 텍스트 바인딩, 데이터 표시 03 Vue.js 강좌 텍스트 바
ecolumbus.tistory.com
v-bind에 대해 알아보자. 이미지, 링크, Style 등등.
Vue.js 태그의 속성을 데이터로 지정
<태그명 v-bind:속성="프로퍼티명"></태그명>
소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
imgname: 'hadoop.jpg'
}
})
}
</script>
</head>
<body>
<h2>Vue js 공부 예제 : Html 요소의 속성 지정 v-bind 05</h2>
<div id="app">
<img src="hadoop.jpg">HTML 기본기능 지정</img>
</br>
<img v-bind:src="imgname">Vus.js v-bind로 지정</img>
</div>
</body>
</html>실행
img 태그의 이미지 파일명을 data: {imgname:'hadoop.jpg'}로 지정을 했다. HTML 기본 img src와 비교해 본다.
링크를 태그
new Vue({
el: "#app",
data: {
imgname:'hadoop.jpg',
myurl:'https://ecolumbus.tistory.com/'
}
})
* html
<img v-bind:src="imgname">Vus.js v-bind로 지정</img>
<a v-bind:href="myurl">슬기로운 개발자 생활 블로그 링크</a><a v-bind:href="myurl"> 슬기로운 개발자 생활 블로그 링크 </a>
data의 myurl 변수에 값(링크) 도 가능하다.
링크 실행
Style를 적용.
new Vue({
el: "#app",
data: {
imgname:'hadoop.jpg',
myurl:'https://ecolumbus.tistory.com/',
myColor:'#ff0000',
mySize:'150%',
mybackgroundColor:'blue'
}
})
* html
<p v-bind:style="{color: myColor}">컬러 레드</p>
<p v-bind:style="{fontSize: mySize}">폰트사이즈</p>
<p v-bind:style="{backgroundColor: mybackgroundColor}">배경색</p>
오늘은 Vue.js의 v-bind 디렉티브에 대해 알아봤다.
Vue.js에서 HTML 엘리먼트의 속성을 컨트롤할 때는 v-bind를 사용한다는 것을 잊지 말자.
포스팅에 사용된 소스를 첨부한다.
반응형
'Web Front 개발공부 > Vue.js' 카테고리의 다른 글
| Vue.js 강좌 양방향 바인딩 v-model 07 (0) | 2022.12.27 |
|---|---|
| Vue.js 강좌 뷰 인스턴스 06 (0) | 2022.12.26 |
| Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 (2) | 2022.12.25 |
| Vue.js 강좌 텍스트 바인딩, 데이터 표시 03 (2) | 2022.12.24 |
| Vue.js 강좌 클릭한 횟수를 표시하는 버튼 만들기 02 (0) | 2022.12.24 |
댓글