FrontEnd/Vue3

Vue3 To do list 만들기 (2)

2022. 6. 21. 00:36
반응형

이전 포스트에서 만든 todolist 객체에 테스트용 더미 데이터를 넣는다

  let todolist = ref([
    {id:1,sbj:'정보1'},
    {id:2,sbj:'정보2'},
    {id:3,sbj:'정보3'},
  ]);

 

출력하고자 하는 위치에 테스트를 해본다

<ul class="list-group">
<li class="list-group-item">
{{todolist[0].sbj}}
</li>

<li class="list-group-item">
{{todolist[1].sbj}}
</li>
</ul>

아직은 다소 지저분하지만 의도한대로 ul안에 li로 들어가있는 모습

이대로는 정적인 정보밖에 출력이 안되는 for문을 사용해보자

Vue3 (3만 되는지는 모르겠다 2는 안해봐서..) 에는 v-for 이 가능하다

이떄 v-bind:key 값이 필요한데 key는 중복되는지 아닌지를 식별하기 위함이다. sql로 치면 PK값 같은 느낌일지도?

 

<ul class="list-group" 
v-for="i in todolist" 
v-bind:key="i.id">

<li class="list-group-item">
{{i.sbj}}
</li>
</ul>

아무튼 ul 안에 for문과 key값을 적용해주면

li안에서는 객체 하나하나 i에 저장된다고 보면 된다

하드 코딩된 li를 지워도 동일한 값을 출력해준다

 

  var  Submit = ()=>{
  todolist.value.push({
    id: Date.now(),
    sbj:todo.value
  });

전 포스트에서 Submit 함수를 통해 배열에 값을 추가할수 있게 되었으므로 당연히

동적으로 값이 추가되어 잘 나온다!!

 

 


(2) Vue3로 Todo List 만들기 예제 코드

<template>

<div class ="container">
  <h1>TodoList</h1>
<form
@submit.prevent="Submit" 
 class="d-flex">

<div class="flex-grow-1 ">
<input class="form-control "
 type="text"
  v-model="todo" 
  placeholder="할일"
  >
</div>

<div >
  <button class="btn btn-primary">
  추가
</button>
</div>
</form>
{{todolist}}

<ul class="list-group" 
v-for="i in todolist" 
v-bind:key="i.id">

<li class="list-group-item">
{{i.sbj}}
</li>
</ul>

</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let todo= ref("");
  let todolist = ref([
    {id:1,sbj:'정보1'},
    {id:2,sbj:'정보2'},
    {id:3,sbj:'정보3'},
  ]);
  
  var  Submit = ()=>{
  todolist.value.push({
    id: Date.now(),
    sbj:todo.value
  });

  }

  return {
    todo,Submit,todolist,
  }; 
}
}
</script>

 

반응형
저작자표시 비영리 (새창열림)

'FrontEnd > Vue3' 카테고리의 다른 글

Vue3 To do list 만들기 (4) 버튼으로 배열 삭제 하기  (0) 2022.06.21
Vue3 To do list 만들기 (3) class , style binding  (0) 2022.06.21
Vue3 To do list 만들기 (1)  (0) 2022.06.21
Vue3 데이터바인딩(양방) v-on:input 사용 예제  (0) 2022.06.20
Vue3 데이터 바인딩 사용예제  (0) 2022.06.20
'FrontEnd/Vue3' 카테고리의 다른 글
  • Vue3 To do list 만들기 (4) 버튼으로 배열 삭제 하기
  • Vue3 To do list 만들기 (3) class , style binding
  • Vue3 To do list 만들기 (1)
  • Vue3 데이터바인딩(양방) v-on:input 사용 예제
빡상이
빡상이
게임 및 개발 관련 일지 작성하는 블로그
빡상이
끄적끄적
빡상이
반응형
  • 분류 전체보기
    • FrontEnd
      • Vue3
      • Nuxt
    • BackEnd
      • 로스트아크 Work
    • 백준(알고리즘)
    • Unreal Engine
    • 아크라시아 세카이
    • C++
    • 웹 개발 꿀팁
    • C#
    • Linux
      • 명령어
    • DB
      • SQL
      • Tibero
전체
오늘
어제

최근 댓글

최근 글

hELLO · Designed By 정상우.
빡상이
Vue3 To do list 만들기 (2)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.