Vue.js 조건에 따른 CLASS 적용

                <input

                  v-model="test_gap "

                  type="text"                                

                  :class="{'PlusStyle' :(test_gap >= 0 ),'MinusStyle' :(test_gap < 0 )}"

                >

Vue의 데이터 바인딩(v-model)을 사용해 사용자가 입력한 값을 vue데이터와 연결한다.

동시에 입력값에 따라 클래스를 동적으로 변경할 수 있다.(예:MinusStyle 클래스는 font-color:red, PlusStyle은 font-color:blue 라고 가정해보자)

클래스가 동적으로 변경되면 스타일이 데이터에 따라 조절되는 것을 확인 할 수 있다.

조건과 CLASS 적용 결과:

• 'PlusStyle' :(test_gap >= 0  ): 만약 test_gap 변수가 0 이상인 경우에는 'PlusStyle' 클래스가 적용되어 폰트색이 파란색으로 변경된다.
• 'MinusStyle' :(test_gap < 0  ): 만약 test_gap 변수가 0 미만인 경우에는 'MinusStyle' 클래스가 적용되어 폰트색이 빨간색으로 변경된다.