vue如何实现一个简单的全选、反选功能

沈建明发布于2019-08-23 16:58 / 3380人阅读

摘要：介绍全选反选功能在项目中还是很常用的，如下写了一个简单的全选反选功能页面结构构建根据自己的结构渲染页面此代码仅为测试全选反选功能实现手动选择全部选择反向选择效果演示

介绍

全选、反选功能在项目中还是很常用的，如下写了一个简单的全选、反选功能；

页面结构构建

根据自己的结构渲染页面（此代码仅为demo测试）

功能实现

new Vue({
    el:"#app",
    data(){
        return{
            list:[1,2,3,4,5,6],
            list1:[],
        }
    },
    methods:{
        //手动选择
        handleAdd(val){
            let isHash = this.list1.findIndex(item=>val == item);
            if(isHash > -1){
                this.list1.splice(isHash,1);
            }else{
                this.list1.push(val);
            }
        },
        //全部选择
        handleAll(){
            this.list1 = JSON.parse(JSON.stringify(this.list));
        },
        //反向选择
        handleReverse(){
            let c = [];
            this.list.forEach(item=>{
                !this.list1.includes(item) && c.push(item)
            })
            this.list1 = c;
        }
    },
})

效果演示

https://codepen.io/voggen/pen...

GPU云服务器云服务器全选和反选功能 html网页的全选全选反选全选反选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103600.html

vue实现单选多选反选全选全不选

摘要：多选如果已经选中了，那就取消选中，如果没有，则选中接下来我们写一下全选，全取消，反选的实现。单选当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 {{item}} 首选定义一个selectedNum,当我们点击item时，便把这个selectedNum更改为我们所点击的item的index，然后每个item上加入判...

刘福 2019-08-23 11:50 评论0 收藏0
用Vue实现一个全选指令

摘要：最近用做了两个项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用的，第二个项目用指令来实现，用起来，发觉指令更加方便。至此，一个全选的指令就完成了。最近用vue做了两个项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。第一次做全选的时候是刚开始接触vue不久，全选的实...

zollero 2019-08-20 10:45 评论0 收藏0
jQuery实现全选、反选和不选功能

摘要：当勾选全选按钮旁边的复选框时，列表中的选项全部选中，反之取消勾选则列表中的选项全部为未选中状态。全选或全不选全选全不选反选设置全选复选框获取选中选项的值选项总个数全选不全选HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.时间都去哪儿了 ...

番茄西红柿 2019-04-23 11:43 评论0 收藏0
vue树形菜单

摘要：树形菜单由于项目原因，没有使用框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。 vue树形菜单由于项目原因，没有使用ui框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。html代码showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

BlackHole1 2019-08-22 15:21 评论0 收藏0
vue树形菜单

摘要：树形菜单由于项目原因，没有使用框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。 vue树形菜单由于项目原因，没有使用ui框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。html代码showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

phoenixsky 2019-08-01 18:41 评论0 收藏0