美文网首页
Twig 模板渲染前端基本使用

Twig 模板渲染前端基本使用

作者: VE视频引擎 | 来源:发表于2021-08-17 14:09 被阅读0次

1.{% ..... %}、{{ ......... }}、{# ...... #}

{% for item in list %}
    {{ item }}
{% endfor %}

{{...}} 用来输出模板表达式的结果
{{ item }}

{# ... #}
用来注释代码
{# <div>{{ item }}</div> #}

2.循环

{% for key,item in list %}
    <div>{{ key }}---{{ item['user'] }}</div>
    <div>{{ loop.index }}</div>
 {% endfor %}
 
 key--list数组循环的下标,
 item--每次循环数组里面的 对象,例{user:'123',num:'1'},取对象里面的值可以使用 item['user'] 或 item.user
 循环体内部变量:
    loop.index 循环的次数(从1开始)
    loop.index0 循环的次数(从0开始)
    loop.revindex 循环剩余次数(最小值为1)
    loop.revindex0 循环剩余次数(最小值为0)
    loop.first 当第一次循环的时候返回true
    loop.last 当最后一次循环的时候返回true
    loop.length 循环的总数
    loop.parent 被循环的数组
 循环必须有 结束 {% endfor %}

3.判断

    {% for key,item in list %}
        <div>{{ key }}---{{ item['user'] }}</div>
     {% endfor %}
 {% elseif list|length > 0 %}
     <div> 多次判断条件 </div>
 {% else %}
     <div> 多次判断条件 </div>
 {% endif %}
 
 | -- 代表过滤器,判断 list 长度是否大于 0 
 if 判断 必须有 结束 {% endif %}
 
 {% if list is null %}
     <div> 判断是否为 null </div>
 {% endif %}
 
 {% if list is not defined %}
     <div> 判断是否定义 </div>
 {% endif %}
 
 {% if list or list|length >0 %}
     <div> 或者 判断使用 or </div>
 {% endif %}
 
 {% if list and list|length >0 %}
     <div> 并且 判断使用 and </div>
 {% endif %}
 
循环中 判断 
{% for key,item in list if item.user == '456' %}
    <div>{{ key }}---{{ item['user'] }}</div>
{% endfor %}

循环 也可以 if 判断组合使用,这样输出的就会是 1---456,数组中其他两个就不会渲染出来 

4.自动转义

Twig 1.8 版本前
{% autoescape true %}
    此处内容以HTML转义策略进行自动转义
{% endautoescape %}

{% autoescape false %}
    此处的内容以原本的样子输出,不转义
{% endautoescape %}

Twig 1.8 以上
{% autoescape %}
    此处内容以HTML转义策略进行自动转义
{% endautoescape %}

{% autoescape 'html' %}
    此处内容以HTML转义策略进行自动转义
{% endautoescape %}

{% autoescape 'js' %}
    此处内容以JS转义策略进行自动转义
{% endautoescape %}

{% autoescape false %}
    此处的内容以原本的样子输出,不转义
{% endautoescape %}

5.过滤器 |

 default:当所修饰的数据不存在或为空时,提供默认值。如 {{ ''|default('默认') }}
 sort:对数组排序
 keys:将数组的全部键名提取成一个数组
 length:返回数组元素的个数或字符串的长度
 lower:将字符串所有字母全部变成小写
 upper:将字符串所有字母全部变成大写
 title:将字符串中每个单词的首字母大写
 split:将字符串分割成数组

6.几个用到的函数

even:是否为偶数,如 {% if i is even %}
odd:是否为奇数,如 {% if i is odd %}
empty:是否为空,如 {% if i is empty %}
null:是否为 null,如 {% if i is null %}
defined:是否已定义,如 {% if i is defined %}

相关文章

  • Twig 模板渲染前端基本使用

    1.{% ..... %}、{{ ......... }}、{# ...... #} {{...}} 用来输出模板...

  • symfony模板

    symfony默认的模板是twig,这是一个便携,高效,安全的模板引擎。 Twig twig是非常简洁的php模板...

  • Vue 模板语法

    模板语法概述 如何理解前端渲染?把数据填充到HTML标签中。 前端渲染方式(1)原生js拼接字符串(2)使用前端模...

  • 2019-03-18

    项目简介 前端 1.使用arttemplate模板引擎渲染页面模板。 2.通过gulp自动化构建前端内容。 3.使...

  • vue.js与后台模板引擎“双花括号”语法冲突时的解决办法

    后台渲染模板如swig,也使用“{{ }}“作为渲染,与前端vue的数据绑定“Mustache”语法 (双大括号)...

  • Twig模板的使用

    1.引言 本文中小结了Twig模板的入门级的基本使用(仅适合入门),更多详细的使用方法可以访问:http://...

  • 重温Django3

    1....模板(了解) 目的: 模板的渲染, 以及基本模板语法的使用 使用格式: 1, 设置模板文件夹, sett...

  • [每天进步一点点~] uni-app、 JavaScript实现

    转换后 前端使用到uView插件,里面的【垂直分类】模板前端页面渲染数据: uni-app 前端代码: 在项目根目...

  • dot模板引擎

    基本模板 for 循环渲染 数组渲染 条件渲染

  • october中的twig模板

    october中使用twig模板语言扩展为多个函数,标签,过滤器和变量。这些扩展允许您使用CMS功能并访问模板中的...

网友评论

      本文标题:Twig 模板渲染前端基本使用

      本文链接:https://www.haomeiwen.com/subject/xvxibltx.html