过滤器的基本使用 | 学习笔记

简介: 快速学习过滤器的基本使用

开发者学堂课程【Python Web 框架 Flask 快速入门过滤器的基本使用】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/603/detail/8789


过滤器的基本使用


目录

一、过滤器

二、常见内建过滤器

三、过滤器演示

一、过滤器

过滤器的本质是函数,是针对模板里的变量进行使用。通过过滤器可以修改变量的显示,甚至格式,运算等等。

过滤器的使用方式为:变量名|过滤器。

{ {variable | filter_name(*args)} }

如果没有任何参数传给过滤器,则可以把括号省略掉

{ {variable | filter_name} }

链式调用

在  jinja2  中,过滤器是可以支持链式调用的,示例如下

{ {“hello world”| reverse | upper } }

二、常见内建过滤器

字符串操作

• Safe:禁用转义

<p>{{‘<em>hello</em>’ | safe }}<p>

•Capitalize :把变量值的首字母转成大写,其余字母转小写

<p>{{"hello' | capitalize }}</p>

• lower  :把值转成小写

<p>{{‘HELLO’| lover }}</p>

• upper  把值转成大写

<p>{{'hello l upper }}</p>

•title:把值中的每个单词的首字母都转成大写

<p>{{ ‘hello' l title }}</p>

• reverse:字符串反转

<p>{{'olleh’l reverse }}</p>

• striptags:渲染之前把值中所有的HTML标签都删掉

<p>{{‘<em>hello</em>’striptags ))</p>

• truncate: 字符串载断

<p>{{'hello every one'|truncate(9)}}</p>

列表操作

• first:取第一个元素

<p>{{ [1,2,3,4,5,6] | first}}</p>

•last:取最后一个元素

<p>{{ [1,2,3,4,5,6] | last}}</p>

Length:获取列表长度

<p>{{[1,2,3,4,5,6]| length}}</p>

• sum:列表求和

<p>{{[1,2,3,4,5,6] |sum}}</p>

•sort:列表排序

<p>{{[6,2,3,1,5,4]| sort}}</p>

三、过滤器演示

{#字符串变大写#}

{{url_str | upper }}<br>

{#字符串反转#}

{{url_str | reverse }}<br>

{#字符串链式调用#}

{{url_str | upper | reverse | lower | reverse }}<br>

相关文章
|
7月前
|
缓存 JavaScript 前端开发
【Vue】模板语法,插值、指令、过滤器、计算属性及监听属性(内含面试题及毕设等实用案例)上篇
Vue 的模板语法是一种用于在 HTML 中声明式地渲染 Vue 组件的语法。它基于 HTML,并通过特定的模板语法扩展了 HTML。Vue 使用了一种称为 “Mustache” 语法的模板插值来绑定数据到 HTML 元素上。在 Vue 的模板语法中,你可以使用双大括号({{}})将数据绑定到 HTML 元素上,这样数据的值会被动态地替换到相应的位置。 在 Vue 的模板语法中,你可以使用双大括号({{}})将数据绑定到 HTML 元素上,这样数据的值会被动态地替换到相应的位置。
CodeBlock 基本使用
基本介绍 代码块又称为初始化块,属于类中的成员【即是类的一部分,类似于方法,讲逻辑语句封装在方法体中,通过{}包围起来】 和方法不同,没有方法名,没有返回值,没有参数,只有方法体,而且不用通过对象或类显式调用,而是加载类时或创建对象时隐式调用。
95 0
|
JavaScript 前端开发 开发者
过滤器-Vue 中全局过滤器的基本使用|学习笔记
快速学习过滤器-Vue 中全局过滤器的基本使用
86 0
过滤器-Vue 中全局过滤器的基本使用|学习笔记
|
JavaScript 前端开发 开发者
过滤器-Vue中全局过滤器的基本使用|学习笔记
快速学习过滤器-Vue中全局过滤器的基本使用
219 0
过滤器-Vue中全局过滤器的基本使用|学习笔记
|
JavaScript 索引
Vue课程64-过滤器的基本用法
Vue课程64-过滤器的基本用法
68 0
Vue课程64-过滤器的基本用法
|
JavaScript
vue课程67过滤器的其他用法
vue课程67过滤器的其他用法
63 0
vue课程67过滤器的其他用法
|
JavaScript 前端开发
Vue中filter过滤器的使用方法
Vue中filter过滤器的使用方法
214 0
|
缓存 Shell 索引
ElastchSearch 基本使用姿势
ElastchSearch 基本使用姿势,如常见的 添加文档 常见的查询姿势 修改/删除文档
232 0
ElastchSearch 基本使用姿势
|
JSON Java 数据库连接
一文带你了解SpringMVC框架的基本使用(上)
SpringMVC实际上你可以认为就是一个Servlet的封装、只不过这个封装能够更好的解决Servlet中的所有问题
100 0
过滤器知识点20160907
过滤器知识点20160907
71 0