[VueJS] Todo List

ieed0205·2020년 11월 11일
0

VueJS

목록 보기
7/21
post-thumbnail

todo project

Vue 강의 참고 영상


[ 소스코드 ]

1. public-index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"

부트스트랩 CSS 이용

2. vue cli 전체 코드

1. todo github

[ 추가한 사항 ]

Enter 누를 시, input 내용이 비어있을 경우 예외처리

style 바인드를 통해서 displayAlert의 string 데이터를 가지고 css에 대한 변화를 추가하였습니다.

<template>

<div class="alert alert-warning alert-dismissible fade show" role="alert" 
     :style="{display: displayAlert}">
      <strong>!경고</strong> 입력란에 글이 입력되지 않았습니다.
    </div>
</template>

data()

displayAlert: 'none'

addTodo(e) : 추가하는 메서드

  methods: {
    addTodo(e){
      if(e.target.value == ''){
        this.displayAlert = 'block'
      }else{
        this.todos.push({
          id: Math.random(),
          text: e.target.value,
          checked: false
        })
        this.todoText = '';
        this.displayAlert = 'none'
      }
    }, ...

결과


영상을 따라하면서 구혔했기 때문에 더 추가할 수 있는 사항이 생기면 업데이트하겠습니다.

profile
🔥 머릿속으로 생각하지만 말고, 행동으로 보여줘

0개의 댓글