表格数据处理的2种写法，伪元素和操作dom

ThinkSNS 发布于2019-08-23 14:41 / 2883人阅读

摘要：写法利用伪元素渲染伪元素之所以被称为伪元素，是因为它们不是真正的页面元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的样式，表面上看上去貌似是页面的某些元素展现出来的，实际上是样式展现的行为，因此被称为伪元素

写法1：利用伪元素渲染

伪元素：之所以被称为”伪元素”，是因为它们不是真正的页面元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素展现出来的，实际上是css样式展现的行为，因此被称为伪元素。
:before 和 :after 的特点
伪元素是通过样式来达到元素效果的，也就是说伪元素不占用 dom 元素节点

伪元素不属于文档，所以 js 无法操作它
伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件
伪元素的优缺点

优点

减少 DOM 节点数

让 css 帮助解决部分 js 问题，让问题变得简单

缺点

*不利于 SEO
*无法审查元素，不利于调试

:before 和 :after常见使用场景
1.清楚浮动
2.利用 attr() 来实现某些动态功能
3.与 counter() 结合实现序号问题
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进行渲染


                    
                    
                
        // 以下为操作dom的函数        
        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]
                }
            }
        },

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100998.html

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

摘要：前端基本功常见概念一点这里前端基本功常见概念二点这里前端基本功常见概念三点这里超文本标记语言，显示信息，不区分大小写升级版的，区分大小写可扩展标记语言被用来传输和存储数据规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。前端基本功-常见概念(一) 点这里前端基本功-常见概念(二) 点这里前端基本功-常见概念(三) 点这里 1.HTML / XML / XHTML html...

happen 2019-08-02 14:05 评论0 收藏0
前端基本功-常见概念(三)

摘要：前端基本功常见概念一点这里前端基本功常见概念二点这里前端基本功常见概念三点这里超文本标记语言，显示信息，不区分大小写升级版的，区分大小写可扩展标记语言被用来传输和存储数据规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。前端基本功-常见概念(一) 点这里前端基本功-常见概念(二) 点这里前端基本功-常见概念(三) 点这里 1.HTML / XML / XHTML html...

Steven 2019-08-23 14:41 评论0 收藏0
jQuery 效率提升建议

摘要：网上有一篇文章转载比较泛滥，已经不知道原文作者了，里面针对效率提升建议非常科学，现在重新组织里面的内容并转载。事实上，这种处理完全不必要。利用这一点，可以大大简化事件的绑定。对象由于会对变更，速度会远慢于函数。 jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来，也拉低了进入javascript的门槛，初学者对浏览器兼容性一无所知的情况下，几行代码就可以写出超炫的特效。网上有一...

liuhh 2019-06-28 14:11 评论0 收藏0
[ 好文分享 ] jQuery最佳实践

摘要：所以，最佳选择是。事实上，这种处理完全不必要。这样的设计，使得读取局部变量比读取全局变量快得多。请看下面两段代码，第一段代码是读取全局变量第二段代码是读取局部变量第二段代码读取变量的时候，不用前往上一层作用域，所以要比第一段代码快五六倍。转自：http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html ...

mzlogin 2019-08-21 10:35 评论0 收藏0
jQuery最佳实践

摘要：所以，最佳选择是。事实上，这种处理完全不必要。这样的设计，使得读取局部变量比读取全局变量快得多。请看下面两段代码，第一段代码是读取全局变量第二段代码是读取局部变量第二段代码读取变量的时候，不用前往上一层作用域，所以要比第一段代码快五六倍。转自：阮一峰日期： 2011年8月 4日http://www.ruanyifeng.com/blo... 上周，我整理了《jQuery设计思想》。...

senntyou 2019-08-20 15:54 评论0 收藏0