Vue attribute 바인딩 문법

img src

// /views/DataBindingAttribute
<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

// /views/DataBindingButton
<template>
<div>
 <input type="text" v-model="textValue" />
 <button type="button" v-bind:disabled="textValue==''">Click</button>
</div>
</template>
<script>
export default {
data() {
  return {
    textValue: ""
  };
}
}
</script>

클래스 바인딩의 경우 오브젝트 형태로 사용하며, 바인딩할 클래스를 Key로 잡고, 바인딩 여부를 true/false로 지정.

클래스

// /views/DataBindingClass
<template>
<div
 class="container"
 v-bind:class="{ active: isActive, 'text-red': hasError }"
>Class Binding</div>
</template>
<script>
export default {
data() {
  return {
    isActive: true,
    hasError: false
  };
}
}
</script>
<style scoped>
.container {
 width: 100%;
 height: 200px;
}
 
.active {
 background-color: yellow;
 font-weight: bold;
}
 
.text-red {
 color: red;
}
</style>

인라인 스타일

// /views/DataBindingStyle
<template>
<div v-bind:style="styleObject">인라인 스타일 바인딩</div>
</template>
<script>
export default {
data() {
  return {
     styleObject: {
       color: 'red',
       fontSize: '13px'
     }
  };
}
}
</script>