在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;

flask的jinja2过滤器使用:遍历索引指定标签class属性,实现样式变化的更多相关文章

  1. 使用jQuery筛选排除元素以修改指定标签的属性

    简单案例: $(function(){ $("td[id][id!='']").click(function(){ //你的逻辑 }); }); 上述代码,有id且id不为空的td ...

  2. Flask 页面缓存逻辑,jinja2 过滤器,测试器

    回调接入点-页面缓存逻辑 from flask import Flask,request,render_template from werkzeug.contrib.cache import Simp ...

  3. flask的jinja2模板中过过滤器的相关小内容

    jinja2模板中有自带的过滤器,有需要直接拿来使用.也可以自己定义过滤器 在过滤器中,有一些常见得操作及关键字.有对字符串的操作,还有对大小写转换的操作.还有对list的操作 过滤器的语法 {# 过 ...

  4. 2.flask模板--jinja2

    1.jinja2模板介绍和查找路径 import os from flask import Flask, render_template # 之前提到过在渲染模板的时候,默认会从项目根目录下的temp ...

  5. 【Flask】 Jinja2模板语言

    Jinja2 Jinja2是Python Web编程中的主流模板语言.因为flask是基于Jinja2和Werkzeug发展而来,在安装flask的时候jinja2自动就被装在上面了. 之前提到了很多 ...

  6. 自定义jinja2 过滤器

    今天,我们要讲的是自定义jinja2 过滤器这个知识点,因为官方文档对此一代而过,讲得不够清楚,所以我们专门拿出来讲一下. 例子 例子写了两个自定义过滤器,一个是转换字典到字符串的过滤器,一个是返回当 ...

  7. Ansible15:文件管理模块及Jinja2过滤器

    目录 常用文件管理模块 1. file 2. synchronize 3. copy 4. fetch 5. lineinfile 6. stat 7. blockinfile Jinja2模板管理 ...

  8. 批处理:遍历输出指定后缀格式的文件名.bat

    批处理:遍历输出指定后缀格式的文件名.bat @echo off type nul >C:\result.txt for /r "d:\我的文档\桌面\交接\webservice\We ...

  9. jQuery之遍历索引相关方法

    遍历索引相关方法: .each(),补充.children() .index() 1 .each() 2..children() .index()

随机推荐

  1. HTTP通过Get请求传递参数时特殊字符被转码的处理方式

    有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了. 编码的格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(16进制)码值.例如 ...

  2. Jsp与JavaScript区别

    有时候会误以为这两个是同一个概念,但其实不是 Jsp全名为Java Server Pages(Java服务器页面),其根本是一个简化的Servlet设计,他实现了在Java当中使用HTML标签.Jsp ...

  3. WCF之.NET Remoting通讯

    一.NET Remoting 介绍 简介 .NET Remoting与MSMQ不同,它不支持离线可得,另外只适合.NET平台的程序进行通信.它提供了一种允许对象通过应用程序域与另一个对象进行交互的框架 ...

  4. asp.net用sql数据库生成json字符串并显示出来

    use Shop ,) )) insert into DictBase select '包装' UNION ALL select '价格' UNION ALL select '品牌' 工厂方法模式 I ...

  5. Vue项目搭建流程

    记录一下vue项目的搭建流程. 1.安装node.npm 下载地址为:https://nodejs.org/en/ 设置环境变量,命令行分别输入: node -v   npm -v  查看安装是否成功 ...

  6. 微信小程序 空白页重定向---二维码扫描第二次进入 不经过onLoad过程解析scene参数,跳转问题

    在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触 ...

  7. js.map文件意义(转)

    什么是source map文件 source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是ma ...

  8. python通用分页功能

    实现: class Page: def __init__(self,current_page,data_count,per_page_count=10,pager_num=10): self.curr ...

  9. 010_STM32程序移植之_lib库建立

    STM32之lib库建立 1. 测试环境:STM32C8T6 2. 测试接口: 3.串口使用串口一,波特率9600 单片机引脚------------CH340引脚 VCC-------------- ...

  10. POI的XWPFTableCell的方法

    1. XWPFParagraph addParagraph() 在这个表格单元格中添加一个段落 2. void addParagraph(XWPFParagraph p) 给这个表格加一段 3. ja ...