vue复选框多选、全选

最新推荐文章于 2025-04-22 17:28:37 发布

岩崎理奈

最新推荐文章于 2025-04-22 17:28:37 发布

阅读量4.7k

点赞数 2

分类专栏： vue笔记

本文链接：https://blog.youkuaiyun.com/qq_41874847/article/details/88667811

版权

本文介绍了在Vue中实现复选框全选功能的思路和过程，重点在于如何通过遍历获取选中项的id和name值，并进行双向数据操作。在实现过程中遇到的问题以及解决方案，特别是使用forEach解决对应问题，同时也表达了对于简化代码的探讨和欢迎交流的态度。

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

 <div class="center">
            <p style="text-align: center;margin-top: 5px;">需提供资料</p>
            <div class="center-top">
            <div class="center-left">
              <p style="padding-top: 3px"><span style="float: left">
                <input type="checkbox" class="checkbox" v-if="materialData.length!==0" @change="checkAll($event)">
                <input type="checkbox" v-else class="checkbox" :checked="xuanze1" disabled>
                </input>
                <span v-show="page1Num">{
  {pNum1}}项</span><span v-show="page1Num2">{
  {num1}}/{
  {pNum1}}项</span></span><span style="float: right;padding-right: 10px">P2</span></p>
              <ul class="ul">
                <li v-for="item in materialData"><input type="checkbox" class="checkbox"  :value="item.num" v-model="checkData" @change="checkt($event)"></input>{
  {item.name}}<span style="float: right;margin-right: 20px" @click="Delete(item.id)"><Icon type="ios-trash-outline"></Icon></span>&l

最低0.47元/天解锁文章