[Vue.js] 점 설치 Todo 목록에 대량 선택 기능이 추가되었습니다.
아마도 Vue 초보자에 대해서만 "Vue.js 시작"가 끝났고 통일된 선택 기능을 추가하고 싶은 사람만 참고할 수 있을 것입니다. 하지만 제가 쓰겠습니다.
완료 이미지
index.추가 코드
index.html
<button @click="selectAll">Select All</button>
<button @click="rmvAll">Remove All</button>
Select All
및 Remove All
버튼을 추가합니다.
모든 단추에 v-on 명령을 설정합니다.
main.js 추가 코드
main.jsselectAll: function() {
for(var i=0; i<this.todos.length; i++) {
this.todos[i].isDone = true
}
},
rmvAll: function() {
for(var i=0; i<this.todos.length; i++) {
this.todos[i].isDone = false
}
[처리 내용]
· Select All
을 누르면 todos 배열의 isDone 키의 값이 진짜로 됩니다 (= 체크 상자에서 선택).
· Remove All
을 클릭하면 todos가 배열한 isDone 키의 값은false (= 체크 상자가 없는 검사) 입니다.
todos 배열 운동.js//Remove Allボタンをクリックで isDone:true → isDone:false になる
//Select Allボタンをクリックで isDone:false → isDone:true になる
todos: [
{title: "aaa", isDone: true},
{title: "bbb", isDone: true},
{title: "ccc", isDone: true},
{title: "ddd", isDone: true}
]
총결산
버튼 하나로 대량 선택과 대량 해제를 전환하려고 했는데 렉이 걸려서 먼저 각자의 버튼을 만들어 봤어요.
Reference
이 문제에 관하여([Vue.js] 점 설치 Todo 목록에 대량 선택 기능이 추가되었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/TOMOYO79815516/items/85315c722e9057f0b4b4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
index.html
<button @click="selectAll">Select All</button>
<button @click="rmvAll">Remove All</button>
Select All
및 Remove All
버튼을 추가합니다.모든 단추에 v-on 명령을 설정합니다.
main.js 추가 코드
main.jsselectAll: function() {
for(var i=0; i<this.todos.length; i++) {
this.todos[i].isDone = true
}
},
rmvAll: function() {
for(var i=0; i<this.todos.length; i++) {
this.todos[i].isDone = false
}
[처리 내용]
· Select All
을 누르면 todos 배열의 isDone 키의 값이 진짜로 됩니다 (= 체크 상자에서 선택).
· Remove All
을 클릭하면 todos가 배열한 isDone 키의 값은false (= 체크 상자가 없는 검사) 입니다.
todos 배열 운동.js//Remove Allボタンをクリックで isDone:true → isDone:false になる
//Select Allボタンをクリックで isDone:false → isDone:true になる
todos: [
{title: "aaa", isDone: true},
{title: "bbb", isDone: true},
{title: "ccc", isDone: true},
{title: "ddd", isDone: true}
]
총결산
버튼 하나로 대량 선택과 대량 해제를 전환하려고 했는데 렉이 걸려서 먼저 각자의 버튼을 만들어 봤어요.
Reference
이 문제에 관하여([Vue.js] 점 설치 Todo 목록에 대량 선택 기능이 추가되었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/TOMOYO79815516/items/85315c722e9057f0b4b4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
selectAll: function() {
for(var i=0; i<this.todos.length; i++) {
this.todos[i].isDone = true
}
},
rmvAll: function() {
for(var i=0; i<this.todos.length; i++) {
this.todos[i].isDone = false
}
//Remove Allボタンをクリックで isDone:true → isDone:false になる
//Select Allボタンをクリックで isDone:false → isDone:true になる
todos: [
{title: "aaa", isDone: true},
{title: "bbb", isDone: true},
{title: "ccc", isDone: true},
{title: "ddd", isDone: true}
]
버튼 하나로 대량 선택과 대량 해제를 전환하려고 했는데 렉이 걸려서 먼저 각자의 버튼을 만들어 봤어요.
Reference
이 문제에 관하여([Vue.js] 점 설치 Todo 목록에 대량 선택 기능이 추가되었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/TOMOYO79815516/items/85315c722e9057f0b4b4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)