vue如何實現一個簡單的全選、反選功能

沈建明發布于2019-08-23 16:58 / 3465人閱讀

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

介紹

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

頁面結構構建

根據自己的結構渲染頁面（此代碼僅為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網頁的全選全選反選全選反選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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