[Vue.js] Vue 데이터 바인딩(binding) - 태그 속성(attribute) 바인딩

- 태그 속성 바인딩

v-bind: 디렉티브 사용 (v-bind 생략 후 :(콜론)으로 사용 가능)

 

- img 요소 src

v-bind:src 디렉티브 사용

<template>
  <div>
    <img v-bind:src="imgSrc" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgSrc: 'https://kr.vuejs.org/images/logo.png'
    }
  }
}
</script>

 

- button 요소 disabled

<template>
  <div>
    <input type="text" v-model="textValue">
    <button type="button" v-bind:disabled="textValue==''">Click</button><!-- 빈문자열이 되면 disabled 속성 활성화 -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      textValue: ''
    }
  }
}
</script>

빈문자열일때 비활성화(disabled) / 문자열이 삽입되면 활성화