[vue] vue bind되는 class 종류가 여러가지 인 경우 (feat. swich)

H·2022년 2월 9일
0

Vue.js

목록 보기
2/4

:class = ' '로 처리 되야 하는 경우

  1. true, false case가 아님
  2. :class="case"인 경우 여러 case를 다 다뤄야하는 경우
  3. :class="string" 들어오는 데이터의 값에 따라 여러 케이스를 뿌려 주는 경우
<strong :class="classTest(desc)"> 
   {{ desc }} 
</strong> 

<script>
  methods:{
  	classTest(val) { // val === desc 
        switch (val) {
          case 'ttt':  // if(val === ttt) 
            return 'ty1'; // :class에 들어가는 str값
            break; // 이어서 진행 
          case 'ddd':
            return 'ty2';
            break;   
        }
     }
  }
</script>

📌 :class = methodsName (value) : 들어오는 데이터를 case로 비교해서 case에 맞게 class 이름을 출력함
📌 if문으로도 처리 할 수 있지만 이런 경우에는 switch문 사용합니다.

profile
🤘 돌머리도 ROCK이다! 🤘

0개의 댓글