在flask项目中实现上图效果，采用使用自定义过滤器的形式对 span 标签的 class 指定。

1、定义过滤器

# common.pydef do_index_class(index):    """自定义过滤器"""    if index == 0:        return "first"    elif index == 1:        return "second"    elif index == 2:        return "third"    else:        return ""

 

2、在 flask 项目 app 创建的函数里面注册过滤器

from info.utils.common import do_index_class# 添加自定义过滤器app.add_template_filter(do_index_class, "index_class")

 

3、 index.html 中使用自定义过滤器（loop.index0 | indexClass ）

loop.index0:当前循环的索引

{% for news in data.click_news_list %}    
{
   { loop.index }}
{% endfor %}

 

4、视图

@app.route('/')def index():    data = {        "click_news_list": ['aaa', 'bbb','ccc'],    }    return render_template('./index.html', data=data)

 

5、css

.first{    background: #f33;    color:#fff;}.second{    background:#ff722b;    color:#fff;}.third{    background:#fa3;    color:#fff;