v-bind:

<template>
  <div>
    <!-- v-bind-value로 value값 단방향 데이터 바인딩 -->
    <input type="text" v-bind:value="userId" readonly>
    <!-- v-bind 생략 가능 -->
    <input type="text" :value="userId" readonly>
    <br>
    <!-- src에 바인딩 -->
    <img :src="imgSrc" alt="" style="width: 100px; height: auto;">
    <br>
    <!-- input에 값이 없으면 button 비활성화 하기 -->
    <input type="search" v-model="txt1">
    <button :disabled="txt1 === ''">조회</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 'abc',
      imgSrc: '/favicon.ico',
      txt1: ''
    }
  }
}
</script>

<style>

</style>

input v-bind:vlaue

• input을 readonly로 설정하면 값 변경 불가능
• 단방향 데이터 바인딩이 가능한데 value에 변수를 주기 위해 v-bind:value 사용
• v-bind:에서 v-bind는 생략 가능
• :value="userId"로 표현 가능

img :src

• imgSrc 변수를 이용해 string 형태로 :src=" "에 삽입 가능

button :disabled

• 버튼 비활성화를 위해 :disabled="txt1 === ''"로 설정하여 txt1이 비어있을 때만 비활성화
• input에는 양방향 데이터 바인딩이 필요하므로 v-model 사용