vue如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的全選、反選功能

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

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

介紹

全選、反選功能在項(xiàng)目中還是很常用的，如下寫了一個(gè)簡(jiǎn)單的全選、反選功能；

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

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

功能實(shí)現(xiàn)

new Vue({
    el:"#app",
    data(){
        return{
            list:[1,2,3,4,5,6],
            list1:[],
        }
    },
    methods:{
        //手動(dòng)選擇
        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...

云服務(wù)器 GPU云服務(wù)器全選和反選功能 html網(wǎng)頁的全選全選反選全選反選

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103600.html

相關(guān)文章

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

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

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

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

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

摘要：當(dāng)勾選全選按鈕旁邊的復(fù)選框時(shí)，列表中的選項(xiàng)全部選中，反之取消勾選則列表中的選項(xiàng)全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項(xiàng)的值選項(xiàng)總個(gè)數(shù)全選不全選HTML 我們的頁面上有一個(gè)歌曲列表，列出多行歌曲名稱，并匹配復(fù)選框供用戶選擇，并且在列表下方有一排操作按鈕。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.時(shí)間都去哪兒了 ...

番茄西紅柿 2019-04-23 11:43 評(píng)論0 收藏0
vue樹形菜單

摘要：樹形菜單由于項(xiàng)目原因，沒有使用框架上的樹形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹形菜單的組件，話不多說，直接上代碼。 vue樹形菜單由于項(xiàng)目原因，沒有使用ui框架上的樹形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹形菜單的組件，話不多說，直接上代碼。html代碼showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

BlackHole1 2019-08-22 15:21 評(píng)論0 收藏0
vue樹形菜單

摘要：樹形菜單由于項(xiàng)目原因，沒有使用框架上的樹形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹形菜單的組件，話不多說，直接上代碼。 vue樹形菜單由于項(xiàng)目原因，沒有使用ui框架上的樹形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹形菜單的組件，話不多說，直接上代碼。html代碼showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

phoenixsky 2019-08-01 18:41 評(píng)論0 收藏0