flask的jinja2过滤器使用:遍历索引指定标签class属性,实现样式变化
2024-09-04 18:25:13
在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;
最新文章
- With(ReadPast)就不会被阻塞吗?
- PHP fsockopen 异步调用接口在nginx上偶尔实效的情况
- linux中oops信息的调试及栈回溯【转】
- python与字符集编码
- 2. scala中的数组
- Python-Day2 Python基础进阶之数据类型
- Oracle工程师技能树
- Maven实战五
- STL之二分查找 (Binary search in STL)
- 树莓派linux驱动学习之hello world
- VLOOKUP和MATCH嵌套以高效引用多列数据
- Android Support Design 控件 FloatingActionButton
- 4327: JSOI2012 玄武密码
- python3编译安装no module named _ssl
- Wannafly挑战赛19 B矩阵
- pandas报错处理:TypeError: Empty &#39;DataFrame&#39;: no numeric data to plot
- CSS transform中的rotate的旋转中心怎么设置
- postgres json
- Java8新特性:Function接口和Lambda表达式参考
- 九度oj-1533 最长上升子序列 (LIS)
热门文章
- PL/SQL查询,字段名添加中文别名,查询结果的字段名会显示问号,处理方法:
- JVM系列-001-JVM监控工具
- C#中的@符号的使用
- 51nod 1051
- [Luogu] 网络
- python实现随机生成头像
- 有向网络(带权的有向图)的最短路径Dijkstra算法
- c++ 容器反转
- springboot 出现 org.hibernate.LazyInitializationException: could not initialize proxy
- HDU 2859 Phalanx ——(DP)