지난 번 계속

에서 구현하는 것이 알기 쉬울지도 모릅니다.
이번에는

STEP1 폼에 포커스가 되면 버튼 표시

STEP2 폼에 문자를 입력하면 버튼의 색을 변경하고 싶습니다.

완성 예

입력 전

STEP1 포커스 후

STEP2 입력 후

이와 같이, 포커스를 하면 버튼을 표시하고,
입력되면 버튼의 색상을 회색에서 녹색으로 바꾸고 싶습니다.

STEP1

버튼 설정

v-if로 조건 분기해, isEditing 인가 titleExists 의 어느 쪽인가가 true 일 때만 버튼을 표시합니다.

<button type="submit"
        class="add-button"
        v-if="isEditing || titleExists">
  Add
</button>

CSS 설정

.addable .add-button {
  background-color: #00d78f;
  pointer-events: auto;
  cursor: pointer;
}

STEP2

data: function() {
  return {
    title: '',
    isEditing: false,
  }
},
computed: {
  classList() {
    const classList = ['addlist']

    if (this.isEditing) {
      classList.push('active')
    }
    // ２. cssを追加し、動的にボタンの色を変える
    if (this.titleExists) {
      classList.push('addable')
    }
    return classList
  },
　// １. 文字が入力されたら、titleExistsがtrueになる
  titleExists() {
    return this.title.length > 0
  }
}

동적으로 변화하는 흐름

① 문자가 입력되면 titleExists가 true가 됩니다.
②true가 된 것으로 computed의 if문을 실행해, css를 추가해 동적으로 버튼의 색을 바꾼다

이제 문자를 입력하면 버튼의 색상이 동적으로 변경된다고 생각합니다! !