Vue ドキュメントの複数選択ボックスのチェックと全選択機能の関係-Vue.js-php.cn

Vue ドキュメントの複数選択ボックスのチェックと全選択機能の関係

WBOY

リリース： 2023-06-21 09:33:35

オリジナル

1729 人が閲覧しました

フロントエンドテクノロジの継続的な開発と進歩に伴い、Vue フレームワークのアプリケーションはますます人気が高まっています。 Vue の実務では、複数のボックスにチェックを入れたり、全選択したりする機能がよく使われます。 Vue のドキュメントでは、複数の選択ボックスにチェックを入れたり、すべてを選択したりする実装方法も非常に詳しく説明されています。

Vue の複数選択ボックス

Vue では、複数選択ボックスの実装方法は非常にシンプルで、必要な箇所だけ複数選択ボックスを使用するだけで済みます<input type= "checkbox"> で十分です。複数のオプションを選択する必要がある場合、各オプションに同じ v-model 値を設定するだけで済みます。具体的なコードは次のとおりです。

<div id="app">
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      checkedItems: []
    }
  })
</script>

ログイン後にコピー

上記のコードでは、配列checkedItemsを使用して、選択されたオプションの値を保存します。ユーザーがオプションをチェックすると、オプションの値がcheckedItems配列に追加されます。

Vue ドキュメントのすべて選択機能

Vue ドキュメントでは、すべての複数選択ボックスの選択を実現するメソッドも提供します。具体的なコードは次のとおりです。

<div id="app">
  <input type="checkbox" id="selectAll" v-model="allChecked" @change="checkAll">
  <label for="selectAll">Select all</label>
  <br>
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3'],
    checkedItems: [],
    allChecked: false
  },
  methods: {
    checkAll() {
      if (!this.allChecked) {
        this.checkedItems = this.items.slice();
      } else {
        this.checkedItems = [];
      }
    }
  }
})
</script>

ログイン後にコピー

上記のコードでは、すべて選択ボックスに allChecked 変数を設定して、すべてを選択するかどうかを決定します。 checkAll 関数では、2 つの分岐を使用して全選択と全選択解除の機能を実装します。すべてのオプションが選択されている場合は、全選択ボックスが自動的にチェックされます。いずれかのオプションが選択されていない場合、全選択ボックスは自動的に選択解除されます。。

複数選択ボックスのチェックと全選択機能の関係

Vue で複数選択ボックスのチェックと全選択機能を実装する場合、非常に重要な問題に注意する必要があります。つまり、子オプションがチェックされている場合の親オプションへの影響です。

すべてのサブオプションが選択されている場合、親オプションは自動的にチェックされます。選択されていないサブオプションがある場合、親オプションは自動的にチェック解除されます。

この関数を実装するには、checkedItems 配列の変更を監視することで、すべて選択されたボックスのステータスを動的に更新できます。具体的なコードは次のとおりです。

<div id="app">
  <input type="checkbox" id="selectAll" v-model="allChecked" @change="checkAll">
  <label for="selectAll">Select all</label>
  <br>
  <input type="checkbox" id="item1" value="item1" v-model="checkedItems" @change="checkParent">
  <label for="item1">Item 1</label>
  <br>
  <input type="checkbox" id="item2" value="item2" v-model="checkedItems" @change="checkParent">
  <label for="item2">Item 2</label>
  <br>
  <input type="checkbox" id="item3" value="item3" v-model="checkedItems" @change="checkParent">
  <label for="item3">Item 3</label>
  <br>
  <p>Checked items: {{checkedItems}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3'],
    checkedItems: [],
    allChecked: false
  },
  methods: {
    checkAll() {
      if (!this.allChecked) {
        this.checkedItems = this.items.slice();
      } else {
        this.checkedItems = [];
      }
    },
    checkParent() {
      if (this.checkedItems.length === this.items.length) {
        this.allChecked = true;
      } else {
        this.allChecked = false;
      }
    }
  }
})
</script>

ログイン後にコピー

上記のコードでは、サブオプションの checkParent 関数を設定し、v-model でリッスンする @change イベントを追加しました。この関数は、サブオプションが変更されたときに呼び出されます。 checkParent 関数では、if-else ステートメントを使用して、親オプションをチェックする必要があるかどうかを判断します。

まとめ

Vue における複数選択ボックスのチェックと全選択の実装方法は v-model 命令と @change イベント監視を利用するだけで非常に簡単です。ただし、親オプションのサブオプションをチェックすることの影響を実装する場合は、checkedItems 配列の変更を監視して、すべて選択されたボックスのステータスを動的に更新する必要があります。初心者にとって、これを理解して理解するには時間がかかるかもしれません。ただし、この知識ポイントをマスターしていれば、複数選択ボックスのチェックを実装してすべての機能を選択することは非常に簡単になります。

以上がVue ドキュメントの複数選択ボックスのチェックと全選択機能の関係の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。