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

1、定义过滤器

# common.py

def do_index_class(index):
"""自定义过滤器"""
if index == :
return "first"
elif index == :
return "second"
elif index == :
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 %}
<li><span class="{{ loop.index0 | indexClass }}">{{ loop.index }}</span></li>
{% 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;

最新文章

  1. With(ReadPast)就不会被阻塞吗?
  2. PHP fsockopen 异步调用接口在nginx上偶尔实效的情况
  3. linux中oops信息的调试及栈回溯【转】
  4. python与字符集编码
  5. 2. scala中的数组
  6. Python-Day2 Python基础进阶之数据类型
  7. Oracle工程师技能树
  8. Maven实战五
  9. STL之二分查找 (Binary search in STL)
  10. 树莓派linux驱动学习之hello world
  11. VLOOKUP和MATCH嵌套以高效引用多列数据
  12. Android Support Design 控件 FloatingActionButton
  13. 4327: JSOI2012 玄武密码
  14. python3编译安装no module named _ssl
  15. Wannafly挑战赛19 B矩阵
  16. pandas报错处理:TypeError: Empty &#39;DataFrame&#39;: no numeric data to plot
  17. CSS transform中的rotate的旋转中心怎么设置
  18. postgres json
  19. Java8新特性:Function接口和Lambda表达式参考
  20. 九度oj-1533 最长上升子序列 (LIS)

热门文章

  1. PL/SQL查询,字段名添加中文别名,查询结果的字段名会显示问号,处理方法:
  2. JVM系列-001-JVM监控工具
  3. C#中的@符号的使用
  4. 51nod 1051
  5. [Luogu] 网络
  6. python实现随机生成头像
  7. 有向网络(带权的有向图)的最短路径Dijkstra算法
  8. c++ 容器反转
  9. springboot 出现 org.hibernate.LazyInitializationException: could not initialize proxy
  10. HDU 2859 Phalanx ——(DP)