본문 바로가기

코딩 프로그래밍94

Vue 배열에서 특정 요소 삭제 Vue만 해당하는 것이 아니라 자바스크립트라고 할 수 있는데요. 기존에 작성하던 코드에서 이어서 진행하겠습니다. 삭제 버튼을 하나 생성 합니다. 반복문 안에서 넣어주세요. 버튼은 반복하는 개벌 항복바다 삭제 버튼이 있어야 하니까 v-for 안에 있어야 합니다. 몇 번째 있는 항목인지 넘겨주기 위해서 index도 같이 같이 가져올 수 있어요. v-for에서 반복하는 Index를 버튼을 만들 때 넘겨요. 삭제 deleteTodo 함수가 필요해요. 만든 deleteTodo를 return에 넣어야 합니다. splice는 배열에서 몇 번째 인자에 있는 항목부터 두 번째 있는 항목만큼 잘라내기 해서 반환합니다. 삭제에도 사용할 수 있습니다. const deleteTodo = (index) => { todos.val.. 2023. 4. 4.
Vue style 동적 바인딩 할당 {{ todo.subject }} style 바인딩 할당하는 방법이 여러 가지 있어요. 변수에 style 관련 내용을 먼저 선언하고 조건에 따라 변하도록 할 수 있어요. todoCompletedStyle 변수를 만들고 원하는 스타일을 넣습니다. const todoCompletedStyle = { textDecoration: 'line-through', color: 'gray' } ... return { todo, todos, errorMessage, todoCompletedStyle, onAdd } 조건에 따라 todoCompletedStyle 적용되도록 합니다. todo.completed 값이 체크되는 경우에만 적용됩니다. {{ todo.subject }} 다른 방법으로는 클래스 바인딩이 있습니다 객체.. 2023. 4. 3.
Vue 배열 이용한 체크박스 바인딩 Vue 사용하면서 배열 처리하는 부분이 생각보다 간단해서 깜짝 놀랐어요. 편하게 데이터를 바인딩하고 수정할 수도 있네요. 체크박스를 표시하기 위해서 input type 이 checkbox인것을 추가했습니다. v-model에 배열 요소인 todo.completed를 연결하는 것이 포인트입니다. todos에 데이터를 push 하는 경우 기본값으로 false가 들어가도록 합니다. 특별한 로직을 넣지 않았는데 체크박스 동작하는 부분이 신기하네요. TO DO 추가 {{ errorMessage }} {{ todo.subject }} 2023. 4. 3.
Vue v-show 적용 v-show 를 통해서 오류가 있는 경우 보여주는 예제 코드입니다. onAdd 가 실행될 때마다 todo.value를 체크하여 아무것도 없다면 errorMessage에 오류 문장을 입력합니다. errorMessage에 데이터가 있으면 표시되도록 v-show를 사용했습니다. TO DO 추가 {{ errorMessage }} {{ todo.subject }} 2023. 4. 3.
Vue 조건 v-show v-if 조건에 따라서 보여주고 보이지 않고 하는 로직을 넣고 싶은데요. 그때 사용할 수 있는 것이 v-show입니다. toggle 변수에 ref 통해서 true 초기값을 할당하였습니다. true 보여줘에는 v-show를 통해서 toggle 변수가 true이면 보이고 toggle에 느낌표를 붙여서 true가 아니면 조건식이 나오도록 해서 false 보여줘 가 보이도록 했습니다. true 보여줘 false 보여줘 토글 버튼 v-show는 css style요을 통해서 보이고 안 보이고를 구현합니다. 똑같은 것을 v-if로 해보겠습니다. true 보여줘 false 보여줘 토글 버튼 v-if 두 번 사용할 수도 있고 v-else를 사용 할 수도 있습니다. v-if는 조건에 만족하는 것이 표시되어서 개발자 도구에서도 볼 .. 2023. 4. 3.
Vue v-for 할일 목록 만들어 배열에 넣기 지금까지 연습했던 것을 바탕으로 input 창에서 입력하는 것을 바탕으로 배열에 넣어 볼 수 있어요. todo와 todos 변수를 생성하여 각각 타이핑하고 있는 상태 문자는 todo에 저장하고 todos에는 todo에서 작성하던 것을 추가할 때 todos에 추가되도록 onAdd 함수를 만들어서 연결합니다. react에서는 submit 연결할 때 e.preventdefault() 넣어줬어야 했는데요. vue에서는 .prevent 라는 event-modifiers 통해서 편하게 할 수 있어요. TO DO 추가 {{ todos }} 지금은 todos를 그냥 변수로 출력하고 있어서 변수 내용이 나올 겁니다. todos 안에 여러 todo가 들어갈 텐데요. v-for를 통해서 반복해서 보여 줄 수 있습니다. 간단.. 2023. 4. 3.
Vue 데이터 바인딩 input v-model Vue에서 데이터를 바인딩하는 방법입니다. 먼저 input 태그를 이용해서 input value에 바인딩해보겠습니다. ref 함수를 이용해서 name 변수를 사용하겠습니다. 보여주는 template 부분에 input 을 추가하고 v-bind를 사용합니다. 기본 태그에는 모두 사용할 수 있어요. input 태그에는 value와 type 같은 것들이 있는데요. 모두 v-bind:value v-bind:type v-bind:class 처럼 활용 가능 합니다. {{ name }} 버튼 v:bind를 줄여서 콜론 : 만 넣어서 사용 할 수 있습니다. v-on 대신에는 @를 사용 할 수 있어요. {{ name }} 버튼 이렇게 하면 단방향입니다. input 에서 타이핑하는 정보가 name 변수에 저장되는 것은 아닙.. 2023. 4. 3.
Vue onClick 함수 사용하기 Vue에서 함수 작성하는 방법을 알고 있다면 버튼을 클릭하면 특정 함수가 실행 되록할 수도 있을 것입니다. 함수를 먼저 만들어 놓고 v-on:click 사용하여 연결할 수 있어요. {{ name }} 버튼 clickHandler 함수를 먼저 만들어서 함수를 먼저 실행하면 Clicked 찍히도록 만들고 나서 button에 있는 v-on:click 부분에 함수 이름을 적어서 사용할 수 있어요. v-on:click에 사용하는 함수 이름 또한 template에 포함되는 것이니 return에 있어야 합니다. name을 수정애서 {{ name }} 사용한 부분이 바뀌도록 하고 싶어서 수정하는 함수를 작성한다고 해 볼게요. name 변수를 let으로 변경하고 clickHandler에서 수정해 봤지만 변수 내용은 바뀌.. 2023. 4. 3.
반응형

티스토리툴바