v-if
: 지정한 뷰 데이터 값의 참, 거짓여부에 따라 html 태그를 처리, 화면에 보여줄것인가 아닌가
ex)
<div v-if="select_list.select_a === '조건문'"></div>
v-for
: vue에서 html 태그 반복문
: 지정한 뷰 데이터 개수만큼 html 태그 반복
ex)
사용예시 : v-for="(변수명, index명) in 배열" :key="index명"
<div v-for="(data, index) in select_list" :key="index"></div>
v-show
: v-if 와 비슷하게 참, 거짓 여부에 따라 html을 보여줄것인지 안보여줄것인지 판단
* v-if와 차이점 : v-show는 태그 자체를 숨김처리(display-)지만, v-if는 태그자체를 삭제한다.
v-bind
: html 태그에 설정된 기본속성 및 데이터와 vue 데이터 속성과 연결
: 줄임말 ":" 가능
ex) :for
v-on
: 이벤트 감지 처리
: 줄임말 "@" 가능
ex) @change, @click
사용예시 : <input type="text" v-model="value" @change="함수명">
<input type="text" v-model="value" @change="select_list(value)">
methods: {
select_list() {
console.log(value);
}
}
v-model
: vue 인스턴스 데이터와 동기화