Python Dash（五）

高冷男孩不吃苹果

已于 2023-02-05 12:49:33 修改

阅读量392

点赞数

CC 4.0 BY-SA版权

分类专栏： Python Dash 文章标签： python html 可视化前端

于 2021-09-06 13:59:49 首次发布

本文链接：https://blog.csdn.net/lcf0000/article/details/120132001

Python Dash 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个具体的案例介绍如何使用Dash库创建一个长度单位换算器，展示了Dash中callback的高级特性，包括函数生成重复HTML代码和长字符串用变量存储的技巧。应用中，一个Input组件可以对应多个Output组件，实现输入值的实时转换和显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、学习内容

通过一个具体的案例——“长度单位换算器”学习callback的高级特性：

callback的一对多关系（一个Input对应多个Output）
两个使用的dash技巧

二、学习过程

代码：

# author : 高冷男孩不吃苹果


import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

#技巧一：使用函数生成重复html代码
def item(name):
    return html.Div([name,html.Span('--',id=name)])

app.layout = html.Div([
    html.H3('长度单位换算器'),
    dcc.Input(value=0,id='m',type='number'),
    item("mm"),
    item("cm"),
    item("dm"),
    item("km")
])

#技巧二：长字符串用变量存储
NODE = 'children'
@app.callback(
    output = [Output("mm",NODE),Output("cm",NODE),Output("dm",NODE),Output("km",NODE)],
    inputs = [Input('m','value')]
)
def calc(value):
    if value == '':
        value = 0
    return (
        f":{value*0.001}mm",
        f":{value*0.01}cm",
        f":{value*0.1}dm",
        f":{value*10.0}km"
    )


app.run_server(debug=True)

结果：