Vue.js에서 변수 다루기, v-if와 v-for

Vue에서 변수 만들기

ref와 reactive

vue에서는 변수를 그냥 써주는 것도 가능하지만, ref혹은 reactive로 감싸서 사용해야한다.

사용법

ref

1. <script>에 import { ref } from "vue";을 임포트
2. 변수를 선언하고 값을 ref()로 감싸기
3. 변수 값을 변경할 때 변수.value에 변경할 값을 넣기

reactive

1. <script>에 import { reactive } from "vue";을 임포트
2. 변수를 선언하고 값을 reactive()로 감싸기
3. property 값을 변경할 때 변수.property에 변경할 값을

차이점

1. 타입 제한
   ref는 String, Number, Object 등 어떠한 타입도 사용 가능
   반면, reactive는 Object, array, Map, Set과 같은 타입만 사용 가능

2. 접근 방식
   ref는 .value를 붙여 접근 가능. 단, <templete>에서 변수를 명시할 때에는 붙일 필요 없음
   reactive는 .value 없이 <templete>에서 사용하는 자바스크립트 문법처럼 사용 가능

실습

v-if와 v-for

v-if

v-for