Vueは完全な選択機能を実装しています

<テンプレート>
  <div>
    <span>すべて選択:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btn">反転</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      編曲: [
        {
          名前:「朱八戒」
          c: 偽、
        },
        {
          名前:「孫悟空」
          c: 偽、
        },
        {
          名前:「唐僧」
          c: 偽、
        },
        {
          名前:「ホワイトドラゴンホース」
          c: 偽、
        },
      ]、
    };
  },
  計算: {
    すべて: {
      // すべてを選択して小さな選択セットに影響を及ぼします(val) {
        //set(val) は、すべての選択の状態を設定します (true/false)
        // 完全な選択ボックスの状態を手動で設定し、配列内の各オブジェクトの c プロパティを反復処理します。つまり、各小さな選択ボックスの状態を反復処理し、その状態を完全な選択ボックスの状態の val に変更します。this.arr.forEach((obj) => (obj.c = val));
      },
      //小さい選択ボックスは完全な選択ボックスに影響します get() {
        //配列内の各オブジェクトの c プロパティが true に等しいかどうか、つまり各小さな選択ボックスの状態を判断します。小さな選択ボックスの状態が true でない限り、チェックされず、false を返し、すべての選択ボックスの状態は false になります。
        // すべての数式: 配列内の「満たされない」条件を見つけ、その場で直接 false を返します
        this.arr.every((obj) => obj.c === true) を返します。
      },
    },
  },
  メソッド: {
    ボタン() {
      //逆選択を実装します//配列内の各項目を走査し、配列内のオブジェクトの c 属性を反転して、それを再度割り当てます this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</スクリプト>