Vue Js 배열(list) 데이터바인딩

Vue Js 배열(list) 데이터바인딩 — #vuejs #vuejs배열데이터바인딩 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않...

#Vue js#Naver Blog

#vuejs #vuejs배열데이터바인딩

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 크롬을 통해 copy and paste하라

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

4.새로운 지식을 넣을땐 뇌를 비우자

JavaScript 배열함수란?

Vue js List(배열) 데이터바인딩

vue js에서는 배열을 데이터바인딩하여 편리하게 사용이 가능합니다. 아래 예제는 웹페이지에서 자주 사용하는 select,option태그에 데이터 바인딩을 얼마나 편리하게 사용가능한지 함께 보겠습니다.

배열만들기

<script>export default { components: {}, data() { return{ lists: \[ {title:"서울", code:"02"}, {title:"부산", code:"051"}, {title:"제주", code:"064"} \] } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: {}}</script>

lists=\[ object \]형태의 배열을 만들고 데이터에 담아두겠습니다. 배열안의 객체에 title과 code값을 넣어두겠습니다.

v-for 사용하기

<template> <div> <select name="" id=""> <option value="">==도시입력==</option> <option value="" :key="list.code" v-for="list in lists">{{list.title}} </option> </select> </div></template>

배열을 데이터바인딩 할때는 반복문 for처럼 사용가능한 v-for을 사용하면 됩니다. for in처럼 사용이 가능하며, 위의 list는 lists안을 돌면서 모든 객체를 반환합니다.

여기서 중요한점은 반드시 key값이 존재해야합니다. key는 고유번호를 넣어주면됩니다. 위 배열에서는 key속성을 바인딩하여 list.code로 잡아주면됩니다. 만약 key값으로 사용할 데이터가 마땅히 존재하지 않는다면 아래와 같이 사용이 가능합니다.

<option value="" :key="i" v-for="(list,i) in lists">

list는 객체형태로 list.title과 같은 형태로 value를 사용할 수 있습니다. 앞에서 배운 text데이터 바인딩을 활용하여 list.title을 옵션을 넣었습니다!