vue2和vue3 全选

vue3

javascript 复制代码
<template>
  <input type="checkbox" v-model="selectAll" />全选
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.value }} <input type="checkbox" v-model="item.check" />
    </li>
  </ul>
</template>
​
<script>
import { computed, reactive } from '@vue/reactivity'
export default {
  setup () {
    const list = reactive([
      {
        id: 1,
        value: 15,
        check: false
      },
      {
        id: 2,
        value: 78,
        check: false
      },
      {
        id: 3,
        value: 63,
        check: false
      },
      {
        id: 4,
        value: 92,
        check: false
      },
      {
        id: 5,
        value: 38,
        check: false
      }
    ])
    // computed
    const selectAll = computed({
      get () {
        return list.every(item => item.check)
      },
      set (status) {
        console.log(status)
        list.forEach(item => { item.check = status })
      }
    })
    return { list, selectAll }
  }
}
</script>
​

vue2

javascript 复制代码
<template>
  <div>
    <!-- 全选控制框 -->
    <input type="checkbox" v-model="selectAll" />全选
    <!-- 列表 -->
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.value }} <input type="checkbox" v-model="item.check" />
      </li>
    </ul>
  </div>
</template>
​
<script>
export default {
  data () {
    return {
      list: [
        {
          id: 1,
          value: 12,
          check: true
        },
        {
          id: 2,
          value: 45,
          check: false
        },
        {
          id: 3,
          value: 78,
          check: false
        },
        {
          id: 4,
          value: 96,
          check: false
        }
      ]
    }
  },
  computed: {
    selectAll: {
      get () {
        return this.list.every(item => item.check)
      },
      set (state) {
        console.log(state)
        this.list.forEach(item => { item.check = state })
      }
    }
  }
}
</script>
​
相关推荐
cronaldo9117 分钟前
研发效能DevOps: Vite 使用 Element Plus
vue.js·vue·devops
敲啊敲952724 分钟前
5.npm包
前端·npm·node.js
CodeClimb34 分钟前
【华为OD-E卷-木板 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
咸鱼翻面儿38 分钟前
Javascript异步,这次我真弄懂了!!!
javascript
brrdg_sefg39 分钟前
Rust 在前端基建中的使用
前端·rust·状态模式
m0_748230941 小时前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端·rust·excel
qq_589568101 小时前
Echarts的高级使用,动画,交互api
前端·javascript·echarts
黑客老陈2 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安2 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite