vue如何實現(xiàn)一個簡單的全選、反選功能

沈建明發(fā)布于2019-08-23 16:58 / 3473人閱讀

摘要：介紹全選反選功能在項目中還是很常用的，如下寫了一個簡單的全選反選功能頁面結(jié)構(gòu)構(gòu)建根據(jù)自己的結(jié)構(gòu)渲染頁面此代碼僅為測試全選反選功能實現(xiàn)手動選擇全部選擇反向選擇效果演示

介紹

全選、反選功能在項目中還是很常用的，如下寫了一個簡單的全選、反選功能；

頁面結(jié)構(gòu)構(gòu)建

根據(jù)自己的結(jié)構(gòu)渲染頁面（此代碼僅為demo測試）

功能實現(xiàn)

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云服務(wù)器云服務(wù)器全選和反選功能 html網(wǎng)頁的全選全選反選全選反選

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103600.html

相關(guān)文章

vue實現(xiàn)單選多選反選全選全不選

摘要：多選如果已經(jīng)選中了，那就取消選中，如果沒有，則選中接下來我們寫一下全選，全取消，反選的實現(xiàn)。單選當(dāng)我們用v-for渲染一組數(shù)據(jù)的時候，我們可以帶上index以便區(qū)分他們我們這里利用這個index來簡單地實現(xiàn)單選 {{item}} 首選定義一個selectedNum,當(dāng)我們點擊item時，便把這個selectedNum更改為我們所點擊的item的index，然后每個item上加入判...

劉福 2019-08-23 11:50 評論0 收藏0
用Vue實現(xiàn)一個全選指令

摘要：最近用做了兩個項目，都需要實現(xiàn)全選反選的功能，兩個項目用了兩種實現(xiàn)方法，第一個項目用的，第二個項目用指令來實現(xiàn)，用起來，發(fā)覺指令更加方便。至此，一個全選的指令就完成了。最近用vue做了兩個項目，都需要實現(xiàn)全選反選的功能，兩個項目用了兩種實現(xiàn)方法，第一個項目用vue的computed，第二個項目用指令來實現(xiàn)，用起來，發(fā)覺指令更加方便。第一次做全選的時候是剛開始接觸vue不久，全選的實...

zollero 2019-08-20 10:45 評論0 收藏0
jQuery實現(xiàn)全選、反選和不選功能

摘要：當(dāng)勾選全選按鈕旁邊的復(fù)選框時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項的值選項總個數(shù)全選不全選HTML 我們的頁面上有一個歌曲列表，列出多行歌曲名稱，并匹配復(fù)選框供用戶選擇，并且在列表下方有一排操作按鈕。 ? 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