Vue checkbox 用v-model实现数值的双向绑定

好好睡觉

于 2019-12-18 17:59:31 发布

阅读量7.9k

点赞数 3

文章标签： vue checkbox双向绑定

本文链接：https://blog.csdn.net/qq_42422846/article/details/103601809

版权

本文介绍了在Vue中如何使用v-model实现checkbox的双向绑定，特别是在批量删除功能中，通过绑定一个数组来动态存储选中的项目ID，简化了处理逻辑。通过实例展示了错误的实现方式以及正确的做法，强调了深入理解知识的重要性。

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

今天在写老师的一个课设的时候，需要实现一个批量删除的功能，简单来说就是前台页面勾选项目，然后将所有的勾选的项目的id传给后台进行处理，由于自己对vue的不了解导致了自己花费了大量的时间在处理不必要的麻烦上面，在此谨醒自己，学东西不能只学表象，废话少说，下面是代码。

首先用v-for实现对后台数据的展示（不得不说这个功能的强大）

<tr v-for="music in musicList" :key="music.id" >
              <td>
                <input type="checkbox" :value="music.id" v-model="check"/>
                <label>{
  {check}}</label>
              </td>
              <td>{
  {music.id}}</td>
              <td>{
  {music.name}}</td>
              <td>{
  {music.author}}</td>
              <td>{
  {music.status}}</td>
              <td>{
  {music.date}}</td>
              <td>
                <a :href="'http://localhost:

最低0.47元/天解锁文章