웹 프론트엔드 JS 튜토리얼 Vue.js 지침을 사용하여 모두 선택 기능을 구현하는 방법

Vue.js 지침을 사용하여 모두 선택 기능을 구현하는 방법

Jun 29, 2018 am 11:52 AM
vue 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其实也是调用了$watchthis.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 라우팅 사용 분석에 대해

vue에서 sass 전역 변수를 도입하는 방법 분석에 대해

vue-router를 사용하여 간단한 탐색 기능 완성

🎜 🎜 🎜 🎜

위 내용은 Vue.js 지침을 사용하여 모두 선택 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

vue에서 echart를 사용하는 방법 vue에서 echart를 사용하는 방법 May 09, 2024 pm 04:24 PM

Vue에서 ECharts를 사용하면 애플리케이션에 데이터 시각화 기능을 쉽게 추가할 수 있습니다. 특정 단계에는 ECharts 및 Vue ECharts 패키지 설치, ECharts 소개, 차트 구성 요소 생성, 옵션 구성, 차트 구성 요소 사용, Vue 데이터에 반응하는 차트 만들기, 대화형 기능 추가 및 고급 사용법이 포함됩니다.

vue에서 내보내기 기본값의 역할 vue에서 내보내기 기본값의 역할 May 09, 2024 pm 06:48 PM

질문: Vue에서 내보내기 기본값의 역할은 무엇입니까? 자세한 설명: 내보내기 기본값은 구성 요소의 기본 내보내기를 정의합니다. 가져올 때 구성 요소를 자동으로 가져옵니다. 가져오기 프로세스를 단순화하고 명확성을 높이며 충돌을 방지합니다. 개별 구성 요소를 내보내고, 명명된 내보내기와 기본 내보내기를 모두 사용하고, 전역 구성 요소를 등록하는 데 일반적으로 사용됩니다.

Vue에서 지도 기능을 사용하는 방법 Vue에서 지도 기능을 사용하는 방법 May 09, 2024 pm 06:54 PM

Vue.js 맵 함수는 각 요소가 원래 배열의 각 요소를 변환한 결과인 새 배열을 생성하는 내장된 고차 함수입니다. 구문은 map(callbackFn)입니다. 여기서 callbackFn은 배열의 각 요소를 첫 번째 인수로 받고 선택적으로 인덱스를 두 번째 인수로 받아 값을 반환합니다. map 함수는 원래 배열을 변경하지 않습니다.

vue에서 이벤트와 $event의 차이점 vue에서 이벤트와 $event의 차이점 May 08, 2024 pm 04:42 PM

Vue.js에서 event는 브라우저에 의해 트리거되는 기본 JavaScript 이벤트인 반면, $event는 Vue 구성 요소에서 사용되는 Vue 관련 추상 이벤트 객체입니다. $event는 데이터 바인딩을 지원하도록 형식이 지정되고 향상되었으므로 일반적으로 $event를 사용하는 것이 더 편리합니다. 기본 이벤트 객체의 특정 기능에 액세스해야 하는 경우 이벤트를 사용하세요.

vue에서 내보내기와 내보내기 기본값의 차이점 vue에서 내보내기와 내보내기 기본값의 차이점 May 08, 2024 pm 05:27 PM

Vue.js에서 모듈을 내보내는 방법에는 내보내기와 기본값 내보내기라는 두 가지 방법이 있습니다. 내보내기는 명명된 엔터티를 내보내는 데 사용되며 중괄호를 사용해야 합니다. 내보내기 기본값은 기본 엔터티를 내보내는 데 사용되며 중괄호가 필요하지 않습니다. 가져올 때 내보내기로 내보낸 엔터티는 해당 이름을 사용해야 하는 반면, 내보내기 기본값으로 내보낸 엔터티는 암시적으로 사용될 수 있습니다. 여러 번 가져와야 하는 모듈에는 내보내기 기본값을 사용하고, 한 번만 내보내는 모듈에는 내보내기를 사용하는 것이 좋습니다.

vue에서 onmounted의 역할 vue에서 onmounted의 역할 May 09, 2024 pm 02:51 PM

onMounted는 Vue의 구성 요소 마운팅 라이프 사이클 후크입니다. 해당 기능은 DOM 요소에 대한 참조 가져오기, 데이터 설정, HTTP 요청 전송, 이벤트 리스너 등록 등과 같은 구성 요소가 DOM에 마운트된 후 초기화 작업을 수행하는 것입니다. 구성 요소가 마운트될 때 한 번만 호출됩니다. 구성 요소가 업데이트된 후 또는 삭제되기 전에 작업을 수행해야 하는 경우 다른 수명 주기 후크를 사용할 수 있습니다.

Vue의 후크는 무엇입니까 Vue의 후크는 무엇입니까 May 09, 2024 pm 06:33 PM

Vue 후크는 특정 이벤트 또는 수명 주기 단계에서 작업을 수행하는 콜백 함수입니다. 여기에는 수명 주기 후크(예: beforeCreate, 마운트, beforeDestroy), 이벤트 처리 후크(예: 클릭, 입력, 키다운) 및 사용자 정의 후크가 포함됩니다. 후크는 구성 요소 제어를 강화하고 구성 요소 수명 주기에 응답하며 사용자 상호 작용을 처리하고 구성 요소 재사용성을 향상시킵니다. 후크를 사용하려면 후크 함수를 정의하고 로직을 실행한 후 선택적 값을 반환하면 됩니다.

vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요? vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요? May 09, 2024 pm 02:33 PM

Vue.js 이벤트 수정자는 다음을 포함한 특정 동작을 추가하는 데 사용됩니다. 기본 동작 방지(.prevent) 이벤트 버블링 중지(.stop) 일회성 이벤트(.once) 이벤트 캡처(.capture) 수동 이벤트 수신(.passive) 적응형 수정자(.self)키 수정자(.key)

See all articles