zoukankan      html  css  js  c++  java
  • 模板语法之过滤器和标签

    模板语法之过滤器和标签

    过滤器:

    过滤器有点类似于小的方法。

    特点:会将|左边的当做过滤器的第一个参数 |右边的当前过滤器第二个参数

    过滤器(|)
    (前端代码并不一定非要在前端写 你也可以在后端写好 传递给前端页面)
    前后端取消转义
    前端
    |safe
    后端

    views

    def login(request):
        n = 123
        f = 12.12
        s = '你妹的 真难'
        l = [1,2,3,4,5,6]
        d = {'username':'jason','password':[123,222,444]}
        t = (1,2,3,4,5)
        se = {1,2,3,4}
        b = True
        ctime = datetime.now()
        file_size = 342384234234
        w = '奥术 大师件 大事肯德 基按 实际对 拉 螺栓空当接 龙'
        w1 = 'asdash ashd jkh sadas asdjjs had sjklad j a kjkjdsklas dkjsakldj dlsjakld '
        w2 = 'he llow ord wqe asdsad sadsadsa dsadasds adasds adsadsadsada sdsad'
        obj = MyClass()
        sss = "<h1>下午上课 一脸懵逼</h1>"
        sss1 = "<script>alert(123)</script>"
        sss2 = "<a href='http://www.xiaohuar.com'>下午上课 需要激情</a>"
        res = mark_safe(sss2)
        xo = '123213213'
        xo1 = 222
        yyy = {'user_list':[1,'22',{'username':['jason','egon']}]}
        return render(request,'login.html',locals())
    

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>{{ file_size|filesizeformat }}</p>  <!--会自动帮你转化-->
    <p>截取10个字符 三个点也算{{ w1|truncatechars:10 }}</p>
    <p>截取10个字符 三个点也算{{ w|truncatechars:10 }}</p>
    <p>安装空格截取单词 三个点不算{{ w1|truncatewords:6 }}</p>
    <p>安装空格截取单词 三个点不算{{ w|truncatewords:6 }}</p>
    <p>安装空格截取单词 三个点不算{{ w2|truncatewords:6 }}</p>
    
    <p>{{ l|slice:'0:5' }}</p>  <!--切片 -->
    <p>{{ l|slice:'0:5:2' }}</p>
    
    <p>{{ ctime|date:'Y-m-d' }}</p> <!--日期-->
    <p>{{ ctime|date:'Y年/m月' }}</p>
    
    
    <p>{{ sss|safe }}</p> <!--使得后端传来的<h1>表现不会变成字符串-->
    <p>{{ sss1|safe }}</p>
    <p>{{ res }}</p>
    
    
    <p>{{ xo|default:'' }} <!--有值就拿值 没值就用后面默认的-->
    </body>
    </html>
    

    结果:

    318.9 GB
    
    截取10个字符 三个点也算asdash ...
    
    截取10个字符 三个点也算奥术 大师件 ...
    
    安装空格截取单词 三个点不算asdash ashd jkh sadas asdjjs had ...
    
    安装空格截取单词 三个点不算奥术 大师件 大事肯德 基按 实际对 拉 ...
    
    安装空格截取单词 三个点不算he llow ord wqe asdsad sadsadsa ...
    
    [1, 2, 3, 4, 5]
    
    [1, 3, 5]
    
    2019-10-23
    
    2019年/10月
    
    下午上课 一脸懵逼(其实很大,只是这里显示不出来,他是<h1>标签)
    下午上课 需要激情
    
    123213213
    

    模板语法的符号就两种
    {{}} 变量相关
    {%%} 逻辑相关

    标签

    html

    {% for foo in l %}
        <p>{{ forloop }}</p>
    {% endfor %}
    

    这个forloop是它里面的自带的

    打印出来的内容是这样的

    {'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 6, 'revcounter0': 5, 'first': True, 'last': False}
    
    {'parentloop': {}, 'counter0': 1, 'counter': 2, 'revcounter': 5, 'revcounter0': 4, 'first': False, 'last': False}
    
    {'parentloop': {}, 'counter0': 2, 'counter': 3, 'revcounter': 4, 'revcounter0': 3, 'first': False, 'last': False}
    
    {'parentloop': {}, 'counter0': 3, 'counter': 4, 'revcounter': 3, 'revcounter0': 2, 'first': False, 'last': False}
    
    {'parentloop': {}, 'counter0': 4, 'counter': 5, 'revcounter': 2, 'revcounter0': 1, 'first': False, 'last': False}
    
    {'parentloop': {}, 'counter0': 5, 'counter': 6, 'revcounter': 1, 'revcounter0': 0, 'first': False, 'last': True}
    

    可以看见counter0和counter1的值越来越大,从0和1开始一直到5和6,first只有第一次循环的时候猜是True ,last只有在最后一次循环的时候才会是True。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    {% for foo in l %}
        <p>{{ forloop }}</p>
        {% if forloop.first %}
            <p>这是我的第一次</p>
        {% elif forloop.last %}
            <p>这是最后一次了啊</p>
        {% else %}
            <p>嗨起来 大宝贝~</p>
        {% endif %}
    {% endfor %}
    
    
    {% for foo in xo %}
        <p>{{ forloop.counter }}:{{ foo }}</p> <!--这里的‘:’只是一个普通的字符-->
        {% empty %} <!--在xo是空的时候才会走,才能走下面那一句-->
        <p>你给我的对象是个空的没法进行for循环</p>
    {% endfor %}
    
    
    {% for foo in d.items %}
        <p>{{ foo }}</p>
    {% endfor %}
    
    {% for foo in d.keys %}
        <p>{{ foo }}</p>
    {% endfor %}
    
    {% for foo in d.values %}
        <p>{{ foo }}</p>
    {% endfor %}
    </body>
    </html>
    

    结果:

    这是我的第一次
    
    嗨起来 大宝贝~
    
    嗨起来 大宝贝~
    
    嗨起来 大宝贝~
    
    嗨起来 大宝贝~
    
    这是最后一次了啊
    
    1:1
    
    2:2
    
    3:3
    
    4:2
    
    5:1
    
    6:3
    
    7:2
    
    8:1
    
    9:3
    
    ('username', 'jason')
    
    ('password', [123, 222, 444])
    
    username
    
    password
    
    jason
    
    [123, 222, 444]
    

    自定义过滤器和标签

    步骤:
    1 在应用名下面新建一个templatetags文件夹(必须叫这个名字)
    2 在改文件夹下 新建一个任意名称的py文件
    3 在该py文件内 固定先写两行代码
    from django.template import Library

    ​ register = Library()

    然后在你的新建的templatetags文件下的py文件里可以新建自定义过滤器了

    比如:

    from django.template import Library
    
    register = Library()
    
    @register.filter(name='myplus')
    def index(a,b):
        return a+b
    

    然后就可以在前端调用了,调用方式如下

    {% load my_tag %} #固定写法,你新建的py文件叫什么,这里就写什么
    {{ 123|myplus:123}}
    

    结果:

    246
    

    同理,自定义标签也是写在同样的位置

    @register.simple_tag(name='mysm')
    def login(a,b,c,d):
        return '%s/%s/%s/%s'%(a,b,c,d)
    

    调用方式:

    {% load my_tag %}
    {% mysm 1 2 3 4 %}
    

    结果:

    1/2/3/4
    
    区别 标签不能再if中使用
                {% if 0|myplus:123 %}  可以用
                    <p>有值</p>
                {% endif %}
    
    
                {% if mysm 1 2 3 4 %}  不能用
                    <p>有值</p>
                {% endif %}
    
  • 相关阅读:
    touch测试
    JS动画代码
    前端css、javascript在线工具
    横向广告(商品)滚动
    写点js的小函数(一)
    HTML5 css reset
    JS新API标准 地理定位(navigator.geolocation)
    写点js的小函数(二、文本框的提示)
    传说中的comet(ajax版)?
    lhgdialog 4.2.0 正式版发布
  • 原文地址:https://www.cnblogs.com/chanyuli/p/11729699.html
Copyright © 2011-2022 走看看