Vue에서 자주 사용하는 전체 선택/역선택
2240 단어 vue.jsjavascript
먼저 input을 만듭니다. mx에 있습니다.txt 앞에 input:CheckBox를 추가합니다.v-model에 당신이 만들 때마다 mx를 추가합니다.check
가장 중요한 것은 forEach가 두루 돌아다니는 데 있다. 나오는 것은 모두 현재의 것이다.어떤 사람들은 왜 데이터 안에 check:[]가 나타나지 않는지 주의하지 않는다.데이터에는 실시간 모니터링이 있습니다. 한 번 누르면 모든 체크가true로 변합니다.
this.list = this.list.filter(e => {
return !e.check
})이 말의 뜻은 네가 걸었던 그 몇 개.현재 데이터에 값을 부여합니다. 이 값은 모든list에서 없애고 싶은 사람을 필터합니다.
기본값은false이지만, 선택된것은true이기 때문입니다.돌아오라고 했어!e.check은false이다. 즉, 내가 원하는 것은 없는 것이다.
-
{{mx.txt}}
export default {
data() {
return {
txt: "",
list: [],
}
},
methods: {
ck() {
this.list.push({
txt: this.txt,
check: false
})
this.txt = ""
},
remAll()
{
this.list = []
},
checkAll()
{
this.list.forEach((mx) => {
mx.check = !mx.check
})
},
rem() {
this.list = this.list.filter(e => {
return !e.check
})
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
