Python Flask 学习笔记(10)--条件渲染与循环渲染

川长思鸟来 2022-09-12 14:44 160阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1.前言
 *  2. 条件渲染
 *  3. 循环渲染
 *  4. 小结

# 1.前言 #

上一篇讲解了如何将变量从python程序渲染到网页。

本篇来讲下如何根据后端的数据，对网页内容进行条件渲染和循环渲染。

# 2. 条件渲染 #

条件渲染的意思是，根据后端变量的情况，来选择性的渲染一部分内容。

后端类：

class User:
        def __init__(self, name, sex):
            self.name = name
            self.sex = sex

后端返回数据：

@app.route('/user')
    def user():
        myUser = User("张三", "male")
        return render_template('user.html', myUser=myUser)

前端根据性别值，条件渲染，当返回数据的sex为male时，则渲染if包裹的部分，否则渲染else包裹的部分。

<p>
            {% if myUser.sex=='male' %}
            男
            {% else %}
            女
            {% endif %}
        </p>

# 3. 循环渲染 #

循环渲染的意思，是渲染一组元素，将每个元素循环展开。

后端返回列表：

@app.route('/user')
    def user():
        myUser = User("张三", "male")
        otherUser = User("李四", "female")
        userList = [myUser, otherUser]
        return render_template('user.html', myUser=myUser, userList=userList)

前端循环显示：

<ul>
                {% for user in userList %}
                <li>名字:{
       {user.name}}--性别:{
       {user.sex}}</li>
                {% endfor %}
            </ul>

所以效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 4. 小结 #

条件渲染和循环渲染，其实还是python模板引擎，根据前端`{%%}`的模板语法，将一些变量的值渲染到指定位置的方式。

因为是在后端对模板内容进行处理，所以可以做的非常灵活，Flask的实现足够简单优雅，我喜欢。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/9c9be0a049c44886815405fedf8985b9.png