:class 속성

Vue.js에서 input 요소에 동적으로 클래스를 적용하려면 v-bind 또는 단축 문법 :을 사용하여 클래스 속성을 동적으로 바인딩할 수 있습니다. 클래스를 동적으로 적용하려면 Vue.js 데이터(data) 속성을 사용하여 클래스 이름을 결정하고 해당 데이터를 템플릿에서 사용합니다.

예를 들어, 입력된 내용에 따라 입력란의 스타일을 변경하려면 다음과 같이 할 수 있습니다.

vue
<template>
  <div>
    <!-- 입력란(input) 요소 -->
    <input
      type="text"
      :class="inputClass" <!-- 클래스 바인딩 -->
      v-model="inputValue" <!-- 입력값 바인딩 -->
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '', // 입력값을 저장하는 데이터 속성
    };
  },
  computed: {
    // 입력값에 따라 클래스를 동적으로 결정하는 계산된 속성
    inputClass() {
      // 입력값이 특정 조건을 충족하면 클래스를 추가합니다.
      if (this.inputValue === '특정조건') {
        return '특정클래스';
      } else {
        return '기본클래스';
      }
    },
  },
};
</script>

<style>
/* 클래스에 적용할 스타일 정의 */
.특정클래스 {
  /* 특별한 스타일 */
}

.기본클래스 {
  /* 기본 스타일 */
}
</style>

위의 코드에서는 :class 속성을 사용하여 inputClass 계산된 속성을 바인딩하여 입력란(input)의 클래스를 동적으로 변경합니다. inputClass 계산된 속성은 입력값(inputValue)에 따라 특정 조건을 충족할 때 클래스를 변경하므로 입력값에 따라 스타일이 동적으로 변경됩니다.

이와 같은 방식으로 Vue.js를 사용하여 입력란에 동적 클래스를 적용할 수 있습니다. 클래스를 동적으로 조작하는 로직은 실제 프로젝트 요구사항에 따라 다양하게 설정할 수 있습니다.