成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vuejs實(shí)現(xiàn)全選功能

jiekechoo / 1405人閱讀

摘要：全選功能開(kāi)發(fā)說(shuō)明項(xiàng)目使用實(shí)現(xiàn)項(xiàng)目提供兩種方式實(shí)現(xiàn)全選功能，并附上源碼，共參考方式一方式一，完全發(fā)揮了的特性，使用了實(shí)現(xiàn)了對(duì)單選按鈕的實(shí)時(shí)監(jiān)控。

全選功能 開(kāi)發(fā)說(shuō)明

項(xiàng)目使用 vuejs 實(shí)現(xiàn)

項(xiàng)目提供兩種方式實(shí)現(xiàn)全選功能，并附上源碼，共參考

方式一

方式一，完全發(fā)揮了 vuejs 的特性，使用了 computed 實(shí)現(xiàn)了對(duì) 單選按鈕的實(shí)時(shí)監(jiān)控。


    

        

            
        

        
    
            
  • 
            
    • 
        

    




var list = [
    {
        title : "數(shù)據(jù)一",
        checked : false,
    },{
        title : "數(shù)據(jù)二",
        checked : true,
    },{
        title : "數(shù)據(jù)三",
        checked : true,
    },{
        title : "數(shù)據(jù)四",
        checked : true,
    },{
        title : "數(shù)據(jù)五",
        checked : true,
}];

var vm = new Vue({
    el : "#app",
    data:{
        list
    },
    computed:{
        status:{
            get(){
                return this.list.filter( item => item.checked ).length === this.list.length
            },
            set( value ){
                this.list.map(function( item ){
                    item.checked = value;
                    return item;
                });
            }
        }
    }
});
方式二

方式二使用普通的事件監(jiān)聽(tīng)方式處理數(shù)據(jù)狀態(tài)


    

        

        
    
            
  • 
                
    • 
        

    



var list = [
    {
        title : "數(shù)據(jù)一",
        checked : false,
    },{
        title : "數(shù)據(jù)二",
        checked : true,
    },{
        title : "數(shù)據(jù)三",
        checked : true,
    },{
        title : "數(shù)據(jù)四",
        checked : true,
    },{
        title : "數(shù)據(jù)五",
        checked : true,
}];

var vm = new Vue({
    el : "#app",
    data : {
        list,
        status : this.list.filter( item => item.checked ).length === this.list.length ? true : false
    },
    methods : {
        allCheck(){
            this.list.map(function( item ){
                item.checked = this.status;
                return item;
            }.bind(this));
        },
        singleCheck(){
            this.status = this.list.filter( item => item.checked ).length === this.list.length ? true : false
        }
    }
});

說(shuō)明在方式二中使用了事件監(jiān)聽(tīng)函數(shù)，使用了change，也可以使用 click，使用click事件時(shí)，低版本的vuejs存在 bug，高版本中 bug 修復(fù)，bug 存在于，在雙向綁定狀態(tài)改變時(shí) 使用click數(shù)據(jù)狀態(tài)后滯后。

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

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

相關(guān)文章

  • 開(kāi)發(fā)中遇到的問(wèn)題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    wenshi11019 評(píng)論0 收藏0

  • 開(kāi)發(fā)中遇到的問(wèn)題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    Yuqi 評(píng)論0 收藏0

  • el-select 下拉框多選實(shí)現(xiàn)全選

    摘要：還是看代碼吧。。。部分請(qǐng)選擇全選全選部分一一二二三三四四五五全選全選全選全選全選全選看看效果圖方法二直接添加一個(gè)全選復(fù)選框，實(shí)現(xiàn)的功能跟方法一是一樣的部分請(qǐng)選擇全選部分一一二二三三四四五五效果圖 在寫(xiě)一個(gè)功能時(shí)發(fā)現(xiàn)el-select支持多選，但是竟然不支持全選，好無(wú)語(yǔ)哦，那就自己實(shí)現(xiàn)一下吧~有兩種方法，第二種感覺(jué)簡(jiǎn)單些 方法一：下拉項(xiàng)增加一個(gè)【全選】，然后應(yīng)該有以下幾種情況： 下拉選...

    Miyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<