뷰

[Vue.js]5.배열,v-for,v-if,테이블,셀렉트박스 사용하기

지난번 포스팅에 이어서 template, script 부분을 다뤄보겠습니다. 1. 배열 data부분에 배열을 추가할 수 있습니다. data() { return { name: "subari", input: "text", options: [ { v: "R", t: "Red" }, { v: "B", t: "Blue" }, { v: "G", t: "Green" }, ], color: "R", }; }, 이 배열을 순회하기 위해서, vue에는 반복문 역할을 하는 v-for가 있습니다. v-for="(d, i) in options" python의 for i in n 과 비슷한 문법입니다. options 배열안에서 반복문이 돌아가고, d는 data, i는 index를 나타냅니다. 현재 배열의 한요소는 v, t 두가지..

[Vue.js]4.data, click, methods 사용하기

지난 포스팅에 이어서 이번에는 vue에서 data, event 등을 다루는 법을 알아보겠습니다. 1. data 다루기 Home.vue에서 export default 내부에 data() { return }를 추가해주고 return 뒤에 원하는 데이터를 { key : value } 형태로 넣어주면 됩니다. 그리고 그 데이터를 사용하기 위해서는 부분에서 {{ key }} 와 같이 중괄호 두개를 이용하여 추가해주면 얘는 key의 value에 해당하는 부분이 화면에 나타나게 됩니다. About.vue About {{ name }} 2. input html에서 value에 해당하는 것을 vue에서는 v-model로 사용할 수 있습니다. data 부분에 input 데이터를 추가하고 v-model 뒤에 ""을 이용하여..