Vue.js의 모두 선택 명령을 사용하여 여러 선택 상자의 모두 선택 작업을 구현하는 방법

Vue.js 개발에서는 다중 선택 상자의 전체 선택 작업을 처리해야 하는 경우가 많습니다. Vue.js의 v-model 지시문을 사용하면 다중 선택 상자의 단일 선택 및 다중 선택 기능을 쉽게 구현할 수 있습니다. 그러나 다중 선택 상자의 전체 선택 기능을 구현하려면 Vue.js의 사용자 정의 지침을 사용해야 합니다. 이 기사에서는 Vue.js의 모두 선택 명령을 사용하여 다중 선택 상자의 모두 선택 작업을 구현하는 방법을 소개합니다.

1. 모두 선택 지시문 만들기

먼저 Vue.js 인스턴스에서 v-check-all이라는 이름의 모두 선택 지시문을 정의합니다.

Vue.directive('check-all', {
  bind: function(el, binding) {
    el.checked = binding.value;
    el.indeterminate = true; // 中间状态
  },
  update: function(el, binding) {
    el.checked = binding.value;
  }
});

이 지시문은 다중 선택 상자 요소에 바인딩됩니다. 바인딩과 업데이트라는 두 가지 수명주기 기능이 있습니다.

바인드 수명주기 기능에서는 다중 선택 상자 요소의 확인 상태를 명령 바인딩 값으로 설정하고 불확정 속성을 true로 설정합니다. indeterminate 속성은 다중 선택 상자 요소가 중간 상태, 즉 선택 상태도 선택 해제 상태도 아님을 나타냅니다. 이는 모두 선택 기능에서 부분적으로 선택된 상태를 달성하기 위한 것입니다.

업데이트 수명 주기 기능에서는 명령어에 바인딩된 값을 수신합니다. 명령어 값이 변경되면 다중 선택 상자 요소의 확인된 상태를 해당 값으로 설정합니다. 이런 식으로 모두 선택 기능이 구현됩니다.

2. 모두 선택 명령 사용

다음으로 모두 선택 작업을 수행하려면 모두 선택 기능이 필요한 다중 선택 상자 목록에서 v-check-all 명령을 사용하세요. 다음 코드에서 볼 수 있듯이:

<div id="app">
  <input type="checkbox" v-model="allChecked" v-check-all="allChecked">
  <span>全选/取消全选</span>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="item.checked">
      <span>{{ item.name }}</span>
    </li>
  </ul>
</div>

위의 예에서는 v-model 지시어를 사용하여 all-selected 상자의 체크 상태를 Vue.js 인스턴스의 allChecked 속성에 바인딩합니다. all-select 상자가 선택되면 allChecked 속성의 값은 true이고, 그렇지 않으면 false입니다.

그런 다음 ul 태그에서 v-for 지시문을 사용하여 목록의 각 요소를 반복합니다. 각 목록 항목 요소에는 확인란과 이름이 포함되어 있습니다.

다중 선택 상자에서 v-model 지시문을 사용하여 각 요소의 확인된 상태를 요소의 확인된 속성에 바인딩합니다. 요소가 선택되면 selected 속성의 값은 true이고, 그렇지 않으면 false입니다.

마지막으로 all-select 상자에서 v-check-all 명령을 사용하고 명령에 바인딩된 값을 allChecked 속성으로 설정하여 all-select 기능을 구현합니다.

3. 부분 선택 상태 구현

위의 예에서는 불확정 속성을 사용하여 부분 선택 상태를 구현했습니다. 목록의 다중 선택 상자가 모두 선택되면 전체 선택 상자가 선택되고, 목록에서 하나 이상의 다중 선택 상자가 선택 취소되면 전체 선택 상자가 선택 취소됩니다. 목록의 다중 선택 상자 중 일부를 선택하면 전체 선택 상자가 중간 상태가 됩니다.

부분적으로 선택된 상태를 얻으려면 Vue.js 인스턴스에서 계산된 속성을 정의하여 목록의 다중 선택 상자 수가 선택한 수와 같은지 확인해야 합니다. 동일하면 다중 선택 상자가 모두 선택되었음을 의미하고, 선택 개수가 0이면 다중 선택 상자가 모두 선택 해제됨을 의미하며, 이때 전체 선택 상자는 선택 해제되어야 합니다. 그렇지 않으면 전체 선택 상자가 중간 상태입니다.

computed: {
  allChecked: {
    get: function() {
      return this.list.every(function(item) {
        return item.checked
      });
    },
    set: function(value) {
      this.list.forEach(function(item) {
        item.checked = value;
      });
    }
  }
}

위 예에서는 Vue.js의 계산 속성을 사용하여 모든 선택을 구현하고 allChecked 계산 속성을 정의했습니다. get 메소드에서는 목록의 각 요소를 반복합니다. 요소의 selected 속성이 false이면 false를 반환하여 모든 다중 선택 상자가 선택되지 않았음을 나타냅니다. 그렇지 않으면 true를 반환하여 모든 확인란이 선택되었음을 나타냅니다. set 메소드에서는 목록에 있는 각 요소의 selected 속성을 지정된 값으로 설정합니다. 즉, 모두 선택 및 모두 선택 취소 기능을 구현합니다.

일반적으로 다중 선택 상자를 모두 선택하려면 사용자 정의 지침을 사용하는 것이 매우 편리한 방법입니다. 위의 예를 통해 독자들은 Vue.js의 모든 지침 선택 사용법을 마스터했다고 믿습니다.

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