vue에서 id를 이용한 바인딩

    <div id="mainPage">

    <template v-if="isMain" >

        <div :id="bgImg % 2 === 0 ? 'particles-js' : 'particles-js2'">

<div class='console-container' @click="goBlog">

<span id='text'></span>

<div class='console-underscore' id='console'>_</div>

          </div>

</div>

</template>   

위 내용은 실제 crocus에 적용된 vue 코드입니다.

bgImg는 data 영역에 있는 변수로써 0~9사이의 랜덤값을 받아들인다.

그리고 짝수일때는 particles-js css를 홀수일때는 particles-js2 css를 가져오고 싶을때 위와 같이 이용한다.

바인딩 할때 조심할 점은 케밥케이스라면 ' 내용 '을 해주어야 함을 꼭 기억하자.

id vinding을 성공하면 class 및 여러 바인딩도 쉽게 해결 할 수 있을 것이다.