[ VueJS 입문 ] 템플릿에 직접 JavaScript 코드 넣기

• 디렉티브에 js코드 넣기 - https://jsfiddle.net/sunghun/th2m9ws7/21/

샘플을 보면 버튼을 클릭할때마다 +1씩 증가하는 샘플이다. 버튼에 v-on:click="count ++"라는 내용을 보면 기존에는 methods를 넣어야할 부분에 js코드를 직접 삽입하였다.

 

• {{ mustache }} 에 js코드 넣기 - https://jsfiddle.net/sunghun/th2m9ws7/24/

위의 샘플과 같아보이지만 {{ count }} 부분에 *3을 추가하였다. Count는 클릭시마다 1씩 증가를 하지만 {{ mustache }} 안의 *3 으로 3의 배수로 숫자가 나타나게 된다.

https://jsfiddle.net/sunghun/th2m9ws7/27/

위 샘플은 삼항연산자와 부등호를 넣어 {{ count * 3 }} 의 값이 10보다 작거나 큰지의 조건을 확인하는 샘플이다. Run 버튼을 눌러 실행 후 클릭 버튼을 눌러 3의 배수씩 숫자를 늘리다가 10보다 값이 커지면 문자열이 바뀌는 것을 볼 수 있다.