[Vue.js] v-bind를 활용한 인풋버튼 비활성화, img src url 변수 사용

v-bind를 활용한 인풋 버튼 비활성화

• v-bind를 활용하여 인풋 버튼 비활성화를 해보았습니다.
• react에서 { } 안에 js코드를 넣을수 있는것 처럼 vue에서는 " " 안에 js코드를 넣을 수가 있네요.
• v-bind:disabled="textValue === ''" 라는 부분을 통해 디스에이블드를 조건에 따라 true flase로 만들어 주었습니다.
• 만약 복잡한 validation이 필요하다면 methods로 빼야할것 같네요!

<template>
  <div>
    <!-- <img v-bind:src="imgUrl" style="height: 100px; width: auto" /> -->
    <input type="text" v-model="textValue" />
    <button type="button" v-bind:disabled="textValue === ''">Click</button>
  </div>
</template>
<script>
export default {
  name: 'ExampleViews',
  data() {
    return {
      imgUrl:
        'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/768px-Vue.js_Logo_2.svg.png?20170919082558',
      textValue: '',
    };
  },
};
</script>