본문 바로가기

FRAME WORK/Vue.js

Vue.js 3 함수를 사용하는 방법

함수를 이용하여 name값을 변경할것이다.

 

 

greeting이라는 변수에 함수를 넣어주었다. 함수는 화살표 함수로 만들었다. 'Hello'라는 값을 리턴하도록 하였다.

그리고 greeting이라는 함수를 setup함수에서 리턴을 해주었다.

이렇게 하면 greeting이라는 함수가 template에 접근이 가능하다.

name 데이터 대신 greeting()을 넣어 'Hello'가 출력되도록 만들었다.

 

 

 

이번에는 greeting에서 name이라는 매개변수를 받도록 하였다.

그리고 'Hello, '+name 이라는 값을 리턴하는 함수로 만들었다.

그다음 name을 greeting인자로 넣어 Hello, inyoung이 출력되도록 하였다.

 

 

 

위의 예제를 아래처럼 작성해도 같은 결과를 도출할 수 있다.

 

 

 

함수를 여러개 만들수도 있다.

 

 

 

 

 

**위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다.

유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!

 

반응형

'FRAME WORK > Vue.js' 카테고리의 다른 글

Vuejs 2 . 뷰 인스턴스 생성하기  (0) 2022.01.06
Vue.js 3 이벤트  (0) 2022.01.05
Vue.js2 => Vue.js3 바뀐점  (0) 2022.01.05
Vue.js 3 컴포넌트  (0) 2022.01.05
Vue.js 3 폴더구조  (0) 2022.01.05