data(), v-bind

변수 비스무리 하지만 변수는 아니고, 값을 참조하는 거라고 한다. 

 

원래 {{ 변수명(걍 편의상 변수라 부름.) }}

이거는 html 태그의 속성에다 사용 못한다.

 

근데 쓸 수 있는 방법이 있다.

<template>

  <div :class="msg">{{ msg2 }}</div>

</template>

<script>

export default {

  data(){

    return {

      msg : 'active',

      msg2 : 'Hello Vue!!'

    }

  },

}

</script>

v-bind:속성명="변수명"

이렇게 하면 된다.

참고로 위에는 그냥 :만 있는데, 이거 축약형이다. 그냥

:속성명="변수명"

이렇게도 사용이 가능하다.

중괄호 하지말아야 한다.

 

 

 

v-bind가 좀 만능이다.

<template>

  <a :[attributeName]="url">naver</a>

</template>

<script>

export default {

  data(){

    return {

      attributeName:'href',

      url:'https://www.naver.com'

    }

  }

}

</script>

 

이런 것도 가능하다.

:[속성명]="변수명"

속성 명까지 이렇게 줄 수도 있다.

속성명 할 때는 대괄호로 묶어야 한다.

 

참고로, "" 여기 안에 문자열 리터럴로 쓰고 싶을 때는

" ' 문자열 ' " 이렇게 작은 따옴표 안에다 써야 함.