Vue CheckBox 全选

最新推荐文章于 2025-06-16 03:14:02 发布

原创最新推荐文章于 2025-06-16 03:14:02 发布 · 891 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的全选CheckBox功能。通过双向数据绑定和事件监听来控制多个CheckBox的状态，实现全选、反选及同步更新的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue CheckBox 全选

 <input type="checkbox" class="checkbox_all" v-model="checkAll" @change="handleCheckAllChange"/>选中
  <div v-for=" row in data.content">
      <input type="checkbox" class="checkbox" :value="row.id" v-model="checkedItems" @change="handleCheckChange"/>
  </div>

  <script>
  export default {
    data () {
      return {
        checkAll: false,
        data: {
          content:[
              {
              id: 1,
              name: 'aaa',
              time: '2017-10-11'
            }, {
              id: 2,
              name: 'bbb',
              time: '2017-10-11'
            }
          ]
        },
        checkedItems: []
      }
    },
    methods: {
     handleCheckAllChange () {
        let items = []
        items = this.data.content.map(item => {
          return item.id
        })
        this.checkedItems = this.checkAll ? items : []
      },
      handleCheckChange () {
        this.checkAll = this.checkedItems.length === this.data.content.length
      }
    }
    }
  </script>