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

資訊專欄INFORMATION COLUMN

表格數(shù)據(jù)處理的2種寫法，偽元素和操作dom

ThinkSNS / 2960人閱讀

摘要：寫法利用偽元素渲染偽元素之所以被稱為偽元素，是因?yàn)樗鼈儾皇钦嬲捻撁嬖兀瞧渌杏梅ê捅憩F(xiàn)行為與真正的頁面元素一樣，可以對(duì)其使用諸如頁面元素一樣的樣式，表面上看上去貌似是頁面的某些元素展現(xiàn)出來的，實(shí)際上是樣式展現(xiàn)的行為，因此被稱為偽元素

寫法1：利用偽元素渲染

偽元素：之所以被稱為”偽元素”，是因?yàn)樗鼈儾皇钦嬲捻撁嬖兀瞧渌杏梅ê捅憩F(xiàn)行為與真正的頁面元素一樣，可以對(duì)其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素展現(xiàn)出來的，實(shí)際上是css樣式展現(xiàn)的行為，因此被稱為偽元素。
:before 和 :after 的特點(diǎn)
偽元素是通過樣式來達(dá)到元素效果的，也就是說偽元素不占用 dom 元素節(jié)點(diǎn)

偽元素不屬于文檔，所以 js 無法操作它
偽元素屬于主元素的一部分，因此點(diǎn)擊偽元素觸發(fā)的是主元素的click事件
偽元素的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

減少 DOM 節(jié)點(diǎn)數(shù)

讓 css 幫助解決部分 js 問題，讓問題變得簡單

缺點(diǎn)

*不利于 SEO
*無法審查元素，不利于調(diào)試

:before 和 :after常見使用場景
1.清楚浮動(dòng)
2.利用 attr() 來實(shí)現(xiàn)某些動(dòng)態(tài)功能
3.與 counter() 結(jié)合實(shí)現(xiàn)序號(hào)問題
4.特效使用

 
    
        
    

                
       // 以下為css樣式         
        .red
            color red
        .red:after
            content "% ↑"
            color red
        .red:before
            content "+"
            color red
        .green
            color green
        .green:after
            content "% ↓"
            color green
寫法2：操作dom進(jìn)行渲染 

                    
                    
                
        // 以下為操作dom的函數(shù)        
        formatterColumn (row, column, cellValue, index) {
            let key = column.property
            let h = this.$createElement
            if (row[key]) { // this.twoPercentArr.includes(key.toString())
                if (key.toString().includes("rate")) {
                    if (row[key] >= 0) {
                        return h("span", {
                            style: "color:red"
                        }, "+" + row[key] + "% ↑")
                    } else if (row[key] < 0) {
                        return h("span", {
                            style: "color:green"
                        }, row[key] + "% ↓")
                    }
                } else {
                    return row[key]
                }
            }
        },

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

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

相關(guān)文章

  • 前端基本功-常見概念(三)

    摘要：前端基本功常見概念一點(diǎn)這里前端基本功常見概念二點(diǎn)這里前端基本功常見概念三點(diǎn)這里超文本標(biāo)記語言，顯示信息，不區(qū)分大小寫升級(jí)版的，區(qū)分大小寫可擴(kuò)展標(biāo)記語言被用來傳輸和存儲(chǔ)數(shù)據(jù)規(guī)范采用異步方式加載模塊，模塊的加載不影響它后面語句的運(yùn)行。 前端基本功-常見概念(一) 點(diǎn)這里前端基本功-常見概念(二) 點(diǎn)這里前端基本功-常見概念(三) 點(diǎn)這里 1.HTML / XML / XHTML html...

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

  • 前端基本功-常見概念(三)

    摘要：前端基本功常見概念一點(diǎn)這里前端基本功常見概念二點(diǎn)這里前端基本功常見概念三點(diǎn)這里超文本標(biāo)記語言，顯示信息，不區(qū)分大小寫升級(jí)版的，區(qū)分大小寫可擴(kuò)展標(biāo)記語言被用來傳輸和存儲(chǔ)數(shù)據(jù)規(guī)范采用異步方式加載模塊，模塊的加載不影響它后面語句的運(yùn)行。 前端基本功-常見概念(一) 點(diǎn)這里前端基本功-常見概念(二) 點(diǎn)這里前端基本功-常見概念(三) 點(diǎn)這里 1.HTML / XML / XHTML html...

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

  • jQuery 效率提升建議

    摘要：網(wǎng)上有一篇文章轉(zhuǎn)載比較泛濫，已經(jīng)不知道原文作者了，里面針對(duì)效率提升建議非?？茖W(xué)，現(xiàn)在重新組織里面的內(nèi)容并轉(zhuǎn)載。事實(shí)上，這種處理完全不必要。利用這一點(diǎn)，可以大大簡化事件的綁定。對(duì)象由于會(huì)對(duì)變更，速度會(huì)遠(yuǎn)慢于函數(shù)。 jQuery簡潔通用的方法集把編碼者從繁重的工作中解脫出來，也拉低了進(jìn)入javascript的門檻，初學(xué)者對(duì)瀏覽器兼容性一無所知的情況下，幾行代碼就可以寫出超炫的特效。網(wǎng)上有一...

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

  • [ 好文分享 ] jQuery最佳實(shí)踐

    摘要：所以，最佳選擇是。事實(shí)上，這種處理完全不必要。這樣的設(shè)計(jì)，使得讀取局部變量比讀取全局變量快得多。請(qǐng)看下面兩段代碼，第一段代碼是讀取全局變量第二段代碼是讀取局部變量第二段代碼讀取變量的時(shí)候，不用前往上一層作用域，所以要比第一段代碼快五六倍。 轉(zhuǎn)自：http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html ...

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

  • jQuery最佳實(shí)踐

    摘要：所以，最佳選擇是。事實(shí)上，這種處理完全不必要。這樣的設(shè)計(jì)，使得讀取局部變量比讀取全局變量快得多。請(qǐng)看下面兩段代碼，第一段代碼是讀取全局變量第二段代碼是讀取局部變量第二段代碼讀取變量的時(shí)候，不用前往上一層作用域，所以要比第一段代碼快五六倍。 轉(zhuǎn)自：阮一峰 日期： 2011年8月 4日http://www.ruanyifeng.com/blo... 上周，我整理了《jQuery設(shè)計(jì)思想》。...

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

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

0條評(píng)論

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