checkbox在vue中的用法小结

最新推荐文章于 2024-09-10 12:58:32 发布

霜如明月

最新推荐文章于 2024-09-10 12:58:32 发布

阅读量4.4k

点赞数 2

分类专栏： vue 文章标签： vue CheckBox

本文链接：https://blog.csdn.net/q3254421/article/details/84874737

版权

本文总结了在Vue框架下使用checkbox的实践经验，包括原生checkbox与Vue中checkbox的区别，如何通过v-model实现多选功能，以及如何禁用特定选项。此外，还探讨了限制最多选择数量的实现方法，并提供了自定义checkbox样式的解决方案。

摘要由CSDN通过智能技术生成

前言

关于checkbox多选框是再常见不过的了，几乎很多地方都会用到，这两天在使用vue框架时需要用到checkbox多选功能，实在着实让我头疼，vue和原生checkbox用法不太一样，之前对于vue中用到过的checkbox也只是别人写好的组件，这次在自己实现时走了很多坑，特意写这篇文章记录下来，给后来者提供一个参考

在这之前，先看看原生checkbox搭配jquery取值的用法

<input type="checkbox" name="hobby" value="游泳">游泳
    <input type="checkbox" name="hobby" value="健身">健身
    <input type="checkbox" name="hobby" value="旅游">旅游
 
    $(".section1 input[type=checkbox][name=hobby]").change(function(){
         var obj = document.getElementsByName("hobby");
     var check_val = [];
     for(k in obj){
      if(obj[k].checked){
        check_val.push(obj[k].value);
      }
     }
     $(".section1 .res").text(check_val);
      });

checkbox禁用