Vue.js 지침을 사용하여 모두 선택 기능을 구현하는 방법
이 글은 주로 Vue.js 명령을 사용하여 모두 선택 기능을 구현하는 방법을 소개합니다. 이제 특정 참조 값을 공유합니다.
최근에 두 가지를 수행했습니다. 둘 다 필요한 Vue 프로젝트는 모두 선택하고 선택 항목을 반전시키는 기능을 구현하기 위해 두 가지 구현 방법을 사용했습니다. 첫 번째 프로젝트는 vue의 계산을 사용했고 두 번째 프로젝트는 이를 구현하기 위해 지침을 사용했습니다. 지침이 더 편리합니다. 다음으로 전체 선택 지침을 사용하는 방법을 소개합니다.
Vue 작업을 막 시작했기 때문에 전체 선택 구현은 Zhihu의 구현 방법을 참조합니다.
1. 서버에서 데이터를 가져와 각 항목에 대해 확인 속성을 설정합니다
2. 선택한 항목을 계산합니다. number selectCount , 선택한 항목 개수가 selectItem 개수와 같으면 선택한 항목 모두 선택
3. 전체 선택 클릭 시 각 항목의 selected 속성을 true로 설정하고, 선택 항목을 반전할 때는 false로 설정하고, 4. selectItems의 속성이 변경될 때마다 true로 확인된 항목이 selectedGroups 배열에 배치됩니다. 구현 코드는 다음과 같습니다.
//全选 data: function() { return { selectItems: [], // 从服务器拿到的数据 } }, computed: { // 全选checkbox绑定的model selectAll: { get: function() { return this.selectCount == this.selectItems.length; }, set: function(value) { this.selectItems.forEach(function(item) { item.checked = value; }); return value; } }, //选中的数量 selectCount: { get: function() { var i = 0; this.selectItems.forEach(function(item) { if (item.checked) { i++; } }); return i; } }, //选中的数组 checkedGroups: { get: function() { var checkedGroups = []; this.selectItems.forEach(function(item) { if (item.checked) { checkedGroups.push(item); } }); return checkedGroups; } } }
이 방법은 우선 사용하기 편리하지 않습니다. 모두 재현이 어렵습니다. 사용하면 사용할 때마다 계산을 한 번씩 작성해야 합니다. 둘째, selectAll,checkedGroups, selectItems가 모두 고정되어 그다지 유연하지 않습니다.
그래서 이 프로젝트에서는 vue 명령어를 사용하여 모두 선택 기능을 다시 구현했습니다. 지시문의 아이디어는 실제로 계산과 유사합니다. 먼저 코드는
export default { 'check-all': { twoWay: true, params: ['checkData'], bind() { /** - 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */ this.vm.$watch(this.params.checkData, (checkData) => { if (checkData.every((item) => item.checked)) { this.set(true); } else { this.set(false); } }, { deep: true }); }, // checkAll发生更改时 update(checkAll) { /** - 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */ if (checkAll) { this.vm[this.params.checkData].forEach((item) => { item.checked = true; }); } else { this.vm[this.params.checkData].forEach((item) => { item.checked = false; }); } }, }, };
<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData"> <ul> <li v-for="item in checkData"> <input type="checkbox" v-model="item.checked"> {{item.text}} </li> </ul>
먼저 이 방법을 사용할 때의 장점에 대해 이야기해 보겠습니다. 1 필요한 경우
v-check-all
을 작성하면 편리합니다. 명령과 check-data</ code>가 가능합니다<p><strong><br/>2. 완전히 선택된 모델과 배열 이름을 checkAll로 지정하지 않으려면 임의의 이름을 사용할 수 있습니다. , checkAllData라고 부를 수 있습니다. 배열을 checkData라고 부르지 않으려면 dataFromServer라고 부를 수 있습니다. </strong></p>명령에서 twoWay를 true로 지정하면 <code>this.set(value)
를 사용하여 checkAll의 값을 설정할 수 있고 params를 사용하여 바인딩 명령 요소에서 checkData 속성 값을 받을 수 있습니다. 작업 배열이 필요합니다. v-check-all
指令和check-data
就可以
2、全选的model和数组名可以定制,用什么名字都可以,全选的model不想叫checkAll叫checkAllData也可以,数组不想叫checkData叫dataFromServer也可以。
在指令中,指定twoWay为true,就可以用this.set(value)
来设置checkAll的值,用params接收绑定指令元素上的属性值checkData,也就是需要操作的数组。
用this.vm
获取使用指令的上下文,调用上下文的$watch
来监听checkData的变化,如果checkData全部选中,则设置checkAll为true,否则设置checkAll为false。
当指令值(checkAll)发生变化,如果为true,则将checkData的checked属性都设为true,否则为false。至此,一个全选的指令就完成了。
在做这个全选指令的时候,本来想用paramWatchers来监听checkData的变化的,但是发觉checkData变动时,并不会触发paramWatchers的回调,后来看了一下源码才发现,paramWatchers其实也是调用了$watch
this.vm
을 사용하여 명령어 사용 컨텍스트를 얻고 컨텍스트의 $watch
를 호출하여 checkData의 변경 사항을 모니터링합니다. 모든 checkData가 선택된 경우 checkAll을 다음으로 설정합니다. true, 그렇지 않으면 checkAll을 false로 설정합니다.
명령값(checkAll)이 변경될 때 true이면 checkData의 selected 속성을 true로 설정하고, 그렇지 않으면 false로 설정합니다. 이 시점에서 모두 선택 명령이 완료됩니다.
이 select all 명령을 수행할 때 원래는 paramWatchers를 사용하여 checkData의 변경 사항을 모니터링하려고 했지만 checkData가 변경되면 paramWatchers의 콜백이 트리거되지 않는다는 것을 발견했습니다. 소스 코드를 살펴본 후 paramWatchers는 실제로 $watch
를 호출했지만 심층 탐지를 지원하지 않습니다.
Directive.prototype._setupParamWatcher = function (key, expression) { var self = this; var called = false; var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) { self.params[key] = val; // since we are in immediate mode, // only call the param change callbacks if this is not the first update. if (called) { var cb = self.paramWatchers && self.paramWatchers[key]; if (cb) { cb.call(self, val, oldVal); } } else { called = true; } }, { immediate: true, user: false });(this._paramUnwatchFns || (this._paramUnwatchFns = [])).push(unwatch); };
위는 이 기사의 전체 내용입니다. 더 많은 관련 내용을 알아보는 데 도움이 되기를 바랍니다. , PHP 중국어 웹사이트를 주목해주세요! 관련 권장 사항:
vue에서 sass 전역 변수를 도입하는 방법 분석에 대해
vue-router를 사용하여 간단한 탐색 기능 완성
🎜 🎜 🎜 🎜
위 내용은 Vue.js 지침을 사용하여 모두 선택 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











vue.js는 중소형 프로젝트 및 빠른 반복에 적합한 반면 React는 크고 복잡한 응용 프로그램에 적합합니다. 1) vue.js는 사용하기 쉽고 팀이 불충분하거나 프로젝트 규모가 작는 상황에 적합합니다. 2) React는 더 풍부한 생태계를 가지고 있으며 고성능 및 복잡한 기능적 요구가있는 프로젝트에 적합합니다.

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.

VUE에서 DIV 요소를 점프하는 두 가지 방법이 있습니다. VUE 라우터를 사용하고 라우터 링크 구성 요소를 추가하십시오. @Click 이벤트 리스너를 추가하고 이것을 호출하십시오. $ router.push () 메소드를 점프하십시오.

VUE에서 태그의 점프를 구현하는 방법에는 다음이 포함됩니다. HTML 템플릿의 A 태그를 사용하여 HREF 속성을 지정합니다. VUE 라우팅의 라우터 링크 구성 요소를 사용하십시오. javaScript 에서이. $ router.push () 메소드를 사용하십시오. 매개 변수는 쿼리 매개 변수를 통해 전달 될 수 있으며 동적 점프를 위해 라우터 옵션에서 경로가 구성됩니다.
