宜宾网站建设公司

vue如何实现全选全不选-创新互联

这篇文章主要介绍了vue如何实现全选全不选，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到成都网站设计、成都网站制作， 我们的网页设计师为您提供的解决方案。

全选功能可以说是前端开发中非常常见的一个功能，以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，对功能的实现自然容易理解一些。

例如下面这个简单的demo

vue如何实现全选全不选

按照jQuery的思想来做的话，要选中全选checkbox和所有的checkbox项，分别注册选中事件，判断选中状态来给相关的checkbox设置对应的状态，这就涉及到很多的dom操作。

下面就看一下vue数据驱动dom的思想来实现这一功能。

vue数据驱动dom实现功能


  
    
     全选
  
  
  
  

利用vue的双向数据绑定v-model命令，当勾选时，checkbox的value值会自动push到所绑定的数组checkData中去，省去了不少对dom的操作。

如果是固定选项这样是可以实现的，但是这种方法有一些弊端，双向绑定数组数据是写死的，不太灵活，如果增加了checkbox选项，要更改wach里绑定数组的长度判断。

有时候checkbox选项也是后台动态获取过来的，这样也灵活一些。

例如后台数据是这样的：

  ajaxData: [{
    name: 'a',
    value: 'apple'
  },{
    name: 'b',
    value: 'banana'
  },{
    name: 'c',
    value: 'orange'
  }]

需要先动态渲染checkbox选项，在进行数据绑定。


  
    
      
       全选
    
    
      
       {{item.name}}
    
  

vue如何实现全选全不选

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

感谢你能够认真阅读完这篇文章，希望小编分享的“vue如何实现全选全不选”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


本文题目：vue如何实现全选全不选-创新互联
文章分享：http://ybzwz.com/article/ihdpc.html

其他资讯