Vue 함수

Vue에서 함수 활용하는 방법 연습해 봐요.

name에 있는 문자를 그냥 template에 표시했었는데요. greeting 함수를 만들어서 출력하는 함수를 만들어 보면서 함수 생성 방법을 연습해 보세요. template 안에서 함수를 사용하려면 return 에 포함시켜 줘야 합니다.

<template>
  <div class="name">
    {{ greeting(name) }} 
  </div>
</template>

<script>
export default {
  setup() {    
    const name = "Vue Code"

    const greeting = (name) => {
      return `Hello ${name}`
    }
    return {
      name,
      greeting
    }
  }
}
</script>

<style scoped>
.name {
  color: orange
}
</style>

함수 생성을 연습해 봤다면 다른 함수를 호출하는 함수를 생성하는 것도 해볼 수 있습니다. 파라미터 없이 다른 함수를 실행해서 결과를 저장해 놓는 변수를 설정해 보세요.

<template>
  <div class="name">
    {{ greet }} 
  </div>
</template>

<script>
export default {
  setup() {    
    const name = "Vue Code"

    const greeting = (name) => {
      return `Hello ${name}`
    }

    const greet = greeting(name)
    
    return {
      name,
      greet
    }
  }
}
</script>

<style scoped>
.name {
  color: orange
}
</style>

간단한 함수 작성으로 느낌을 익혀보세요.