vue實(shí)現(xiàn)全選功能

更新時(shí)間：2021年10月28日 08:28:13 作者：采默

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)全選功能的具體代碼，供大家參考，具體內(nèi)容如下

全選思路

1、準(zhǔn)備標(biāo)簽,樣式,js,準(zhǔn)備數(shù)據(jù)

2、將數(shù)據(jù)循環(huán)展示在頁(yè)面上, 在li 里v-for

3、在全選框 v-model = "isAll" //總的狀態(tài)

4、小選框 v-model = "" //單個(gè)的狀態(tài)

5、小選影響全選 ... 定義計(jì)算屬性 isAll 統(tǒng)計(jì)小選框的狀態(tài), every查找數(shù)組里不符合條件的,直接返回false ...判斷每一個(gè)小選框的狀態(tài), 只要有一個(gè)小選框的狀態(tài)不為true 就是沒(méi)有被勾上, 那就返回false , 全選框的狀態(tài)就是false

6、全選影響小選... set(val) 設(shè)置全選的狀態(tài)(true/false)...然后就遍歷每個(gè)小選框看小選框的狀態(tài),讓它的狀態(tài)改為val全選的狀態(tài)

<template>
  <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>
</template>
 
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "豬八戒",
          c: false,
        },
        {
          name: "孫悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龍馬",
          c: false,
        },
      ],
    };
  },
  computed: {
    isAll: {
      //全選影響小選
      set(val) {
        //set(val) 設(shè)置全選的狀態(tài)(true/ false)
        //我們手動(dòng)設(shè)置了全選框的狀態(tài),就遍歷數(shù)組里的每個(gè)對(duì)象的c屬性, 也就是遍歷看每個(gè)小選框的狀態(tài),讓它的狀態(tài)改為 val 全選框的狀態(tài)
        this.arr.forEach((obj) => (obj.c = val));
      },
      //小選框影響全選框
      get() {
        //判斷數(shù)組里的每一個(gè)對(duì)象的c屬性 它是不是等于true, 就是判斷每一個(gè)小選框的狀態(tài), 只要有一個(gè)小選框的狀態(tài)不為true 就是沒(méi)有被勾上, 那就返回false , 全選框的狀態(tài)就是false
        // every口訣: 查找數(shù)組里"不符合"條件, 直接原地返回false
        return this.arr.every((obj) => obj.c === true);
      },
    },
  },
  methods: {
    btn() {
      //實(shí)現(xiàn)反選
      //遍歷數(shù)組里的每一項(xiàng),  讓數(shù)組里對(duì)象的c屬性取反再賦值回去
      this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: