이것을 사용해서 “삭제 버튼”을 만들어 보자.
이 부분이다.
여기에 넣으면 나타난다. 그리고 아이콘을 https://materialdesignicons.com/에서 “delete” 검색해서 바꾸고 색상도 바꾼다.
삭제 기능은 선택한 Array의 Object를 null로 하는 것이다.선택한 “해야 할 일.id”를 filter를 사용하여 해당 object, 즉 this.task를 null로 한다.
★filter 공부추가 http://7942yongdae.tistory.com/49 이번에는 Java Script 의 array가 가진 filter 함수의 정의와 사용법에 대해 이야기해보도록 하겠습니다. array의 함수 중 가장 많이 사용되는 함수 중 3대장이라고 할 수 있는 것이 map, filter, reduce이다.. 7942yongdae.tistory.com 이번에는 Java script 의 array가 가진 filter 함수의 정의와 사용법에 대해 이야기해보도록 하겠습니다. array의 함수 중에서 가장 많이 쓰이는 함수 중 3대장이라고 할 수 있는 것이 map, filter, reduce입니다. 그중에서도 filter는 활용도가 높은 편이라 어디 정해진 장소 없이 쓰이는 편입니다.
filter 정의 Array.prototype.filter(callbackfn[,thisArg])
const numbers=[1,2,3,4,5];const result=numbers.filter(number=>number>3);console.log(numbers);//[1,2,3,4,5];console.log(result);//[4,5]
filter는 해석 그대로 여과하는 역할을 하는 함수입니다. 주로 특정 조건을 충족하는 새로운 배열을 필요로 할 때 사용하는 편입니다. SQL로 치면 where 절에서 하는 행위를 하는 함수입니다. ECMA에는 “주어진 배열의 값을 오름차순으로 접근하고 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다”고 정의되어 있습니다.
filter는 원시적인 값만 사용할 수 있는 것이 아니라 json과 같은 객체를 사용하여 true를 판별할 수 있습니다. 즉, filter는 javascript에서 사용할 수 있는 모든 형태의 값을 참(true) 또는 거짓(false)으로 분류하여 원하는 조건을 충족하는 새로운 배열을 반환할 수 있습니다.
[] 이번에는 내용을 추가해보자
요Textfields 요소를 사용한다.
코드를 넣어서
상기 2개의 속성값을 추가한다.
입력한 데이터 처리를 위해 v-model을 사용한다.
V-model은 양방향 데이터 바인딩이다.- 단방향 바인딩은 데이터를 화면에 출력하는 것-쌍방향 바인딩은 화면에 입력된 것을 데이터를 전달하고 다시 화면에 전달하는 것이 가능한 것.
참고 사이트 : http://blog.naver.com/jocooldog/2224824947301.v-model이란? v-model은 Vue에서 양방향 바인딩을 가능하게 한다. * 단방향 바인딩: 데이터를 화면에… blog.naver.com
API=>v-text-field=>Events=>click:append
v-model=”newTaskTitle” @click: append=”addTask” @keyup.enter=”addTask”
[ ] 내용이 없을 때 표시하는 방법 필요 문법: v-if와 v-else
출처 : https://blog.naver.com/hj_kim97/222604996702Vue 기초문법 배우기 5. 조건과 반복(v-if, v-for)-v-if 디렉티브-v-show 디렉티브-v-for 디렉티브… blog.naver.comv-if와 v-else가 서로 다른 태그 범위 안에 있는게 이상한데… 원래 이렇게 쓴다고 한다.
여기까지 작업한 파일