VueJS - 7. 템플릿에 직접 JavaScript 코드 넣기

아래 글을 따라하며 VueJS에 적응하기

 

https://medium.com/@hozacho/v-on-%ED%85%9C%ED%94%8C%EB%A6%BF%EC%97%90-%EC%A7%81%EC%A0%91-javascript-%EC%BD%94%EB%93%9C-%EB%84%A3%EA%B8%B0-%EB%A7%A8%EB%95%85%EC%97%90-vuejs-f0609a7756b7

[맨땅에VueJS] 템플릿에 직접 JavaScript 코드 넣기

요약

<Event Listener에서 Method가 아닌 JS 코드 넣기>

 

1. 디렉티브에 js 코드 넣기

 

<button v-on:click="count ++">클릭</button>

 

 - 클릭 시 Count 값이 1씩 증가

 

2. {{mustache}}에 js코드 넣기

 

{{ count * 3 }}

<button v-on:click="count ++">클릭</button>

 

- 클릭 시 3의 배수로 출력

 

3. 조건부(삼항) 연산자를 넣어보기

 

{{ count * 3 > 10 ? "10보다 큽니다." : "10보다 작거나 같습니다."}}

 

- 클릭 시 3이 10보다 작거나 큰 경우 다르게 출력된다.