728x90
반응형
v-bind
태그의 속성을 데이터로 지정할 때에는 v-bind
<태그명 v-bind:속성="프로퍼티명"></태그명>
# v-bind는 자주 쓰이는 디렉티브로 생략이 가능하다. v-bind대신 " : "만 써도 가능하다.
<a v-bind:href="url">
<a :href="url">
img 태그의 src를 데이터로 지정
<img v-bind:src="프로퍼티명<<이미지>>"></img>
<h2>이미지를 지정하는 예</h2>
<div id="app">
<img src="<<이미지.png>>">직접지정</img>
<img v-bind:src="fileName">v-bind로 지정</img>
</div>
<script>
new Vue({
el: '#app',
data: {
fileName:'<<이미지>>.png'
}
})
</script>
코드를 작성하면 <<이미지>> 이미지가 화면에 출력이된다.
링크 지정
a 태그의 링크를 data: 의 프로퍼티로 URL을 지정 할 수 있다.
html
<a v-bind:href="프로퍼티명 <<링크>>"></a>
링크 지정 예제)
<body>
<div id="app">
<a href="https://blog.naver.com/jk3858/">링크를 직접 지정</a>
<a v-bind:href="myURL">링크를 v-bind로 지정</a>
</div>
<script>
new Vue({
el: '#app',
data: {
myURL: 'https://blog.naver.com/jk3858'
}
})
</script>
코드를 입력하고 라이브 서버로 열면 링크지정하는 창이 나온다,
우측 정렬, 좌측 정렬, 가운데 정렬 지정
블록 태그에서 align 요소 지정
<p v-bind:align="프로퍼티명"></p>
우측 정렬
<div id="app">
<p align="right">우측정렬 직접 지정</p>
<p v-bind:align="myAlign">우측정렬을 v-bind 로 지정</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myAlign:'right'
}
})
</script>좌측 정렬
<div id="app">
<p align="left">좌측정렬 직접 지정</p>
<p v-bind:align="myAlign">좌측정렬을 v-bind 로 지정</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myAlign:'left'
}
})
</script>가운데 정렬
<div id="app">
<p align="center">가운데정렬 직접 지정</p>
<p v-bind:align="myAlign">가운데정렬을 v-bind 로 지정</p>
</div>
<script>
new Vue({
el: '#app',
data: {
myAlign:'center'
}
})
</script>
인라인 스타일 지정
인라인 스타일로 data:의 갑을 지정 할 수도 있다.
<p v-bind:style="프로퍼티명"></p>예) 색, 글자 크기, 배경색 지정할 때 사용
color를 스타일로 지정
<p v-bind:style="{color:프로퍼티명}"></p>font-size를 style로 지정
<p v-bind:style="{fontSize:프로퍼티명"></p>background-color를 style로 지정
<p v-bind: style="backgroundColor:프로퍼티명"></p>
728x90
반응형
'Vue.js' 카테고리의 다른 글
| Vue.js 표기법 (0) | 2022.12.30 |
|---|---|
| Vue.js 버튼으로 카운터 업 다운 만들기 (0) | 2022.12.29 |
| Vue.js 인스턴스 (0) | 2022.12.29 |
| Vue.js (0) | 2022.12.29 |
| Vue.js Watch 실습 (0) | 2022.12.29 |