[Vue] 속성 지정

v-bind

- 요소의 속성을 데이터로 지정

- <태그명 v-bind:속성="프로퍼티명"></태그명>

- <태그명 :속성="프로퍼티명"></태그명> 의 형식으로 v-bind를 생략하여 사용할 수도 있다.

---

이미지 지정

- img 태그의 src속성의 파일명을 data:에 값으로 지정할 수 있다.

- <img v-bind:src="프로퍼티명"></img>

<h2>이미지를 지정하는 예제</h2>
<div id="app">
    <img src="imgFile.png">직접지정</img>
    <img v-bind:src="fileName">v-bind로 지정</img>
    <img :src="fileName">v-bind생략 </img>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            fileName:'imgFile.png'
        }
    })
</script>

 

링크 지정

- a 태그의 링크를 data:의 프로퍼티로 URL을 지정할 수 있다.

- '배열로 준비된 링크들을 자동으로 나열하기' 등의 용도로 사용할 수 있다.

- <a v-bind:href="프로퍼티명"></a>

<h2>링크를 지정하는 예제</h2>
<div id="app">
    <a href="https://oda-story.tistory.com/">링크를 직접지정</a><p>
    <a v-bind:href="myURL">링크를 v-bind로 지정</a>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myURL:'https://oda-story.tistory.com/'
        }
    })
</script>

 

정렬 지정

- 블록이나 셀에서의 align을 data:의 값으로 지정할 수 있다.

- <p v-bind:align="프로퍼티명"></p>

<h2>align 지정 예제</h2>
<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>

 

인라인 스타일 지정

- style을 데이터로 지정 : <p v-bind:style="프로퍼티명"></p>

- color를 style로 지정 : <p v-bind:style="{color:프로퍼티명}"></p>

- font-size를 style로 지정 : <p v-bind:style="{fontSize:프로퍼티명}"></p>

- background-color를 style로 지정 : <p v-bind:style="{backgroundColor:프로퍼티명}"></p>

! 인라인 스타일은 CSS를 그대로 쓰기 때문에 케밥표기법을 사용하지만

  v-bind로 지정하는 경우는 JavaScript를 사용하는 것이므로 카멜표기법을 사용한다.

※ 표기법
케밥 표기법 : 단어-단어, 단어사이에 하이픈(-)을 이용하여 연결 (font-size) - html이나 css에서 사용
카멜 표기법 : 단어단어, 두 번째 단어의 첫글자를 대문자로 표기 (fontSize) - js에서 사용
파스칼 표기법 : 단어의 첫 글자를 모두 대문자로 표기 (FontSize) - class명 지정시 사용

 

<h2>인라인 지정 예제</h2>
<div id="app">
    <p style="color: #E80;">문자색 직접 지적</p>
    <p v-bind:style="{ color: myColor }">문자색을 v-bind로 지정</p>
    <hr>
    <p style="font-size: 200%">글자 크기 직접 지정</p>
    <p v-bind:style="{ fontSize: mySize }">글자크기를 v-bind로 지정</p>
    <hr>
    <p style="background-color: aqua;">배경색 직접 지정</p>
    <p v-bind:style="{ backgroundColor: myBackColor }">배경색을 v-bind로 지정</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myColor:'#E08000',
            mySize:'200%',
            myBackColor:'aqua'
        }
    })
</script>

 

클래스 속성 지정

-클래스 속성의 클래스 명을 data: 의 값으로 지정할 수 있다.

- 특정 클래스를 붙일지 붙이지 않을지도 값으로 지정할 수 있다.

- class를 데이터로 지정 : <p v-bind:class="프로퍼티명(클래스명)"></p>

- class를 데이터로 복수 지정 : <p v-bind:class="[프로퍼티명1(클래스명), 프로퍼티명2(클래스명)]"></p>

- class의 활성화를 데이터로 지정 : <p v-bind:class="{'클래스명':프로퍼티명(true/false)"></p>

<div id="app">			
    <p class="strike-through">직접 클래스 지정</p>
    <p v-bind:class="myClass">v-bind로 클래스 지정</p>
    <p v-bind:class="[myClass, darkClass]">v-bind로 복수의 클래스 지정</p>
    <p v-bind:class="{'strike-through': isON}">데이터로 클래스 ON/OFF</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myClass: 'strike-through',
            darkClass: 'dark',
            isON: true //false일 경우 클래스가 적용되지 않도록함
        }
    })
</script>