动态价格计算及显示方法

本文介绍如何根据选择的授权平台和期限动态计算并显示价格。通过遍历后端返回的树形数据（例如包含哔哩哔哩、微博、快手等平台的授权信息），前端页面使用 Vue.js 或原生 JavaScript 实现授权平台和期限的选择。用户选择不同的授权平台和期限后，系统会根据 `price_list` 数据动态更新显示对应价格。文章详细讲解了数据结构、代码实现和动态更新价格的逻辑，帮助开发者快速构建类似功能。

遍历树形数据，动态展示授权平台和期限

需求

• 根据后端返回的树形数据，展示授权平台和授权期限
• 用户选择不同的授权平台时，展示对应平台下的授权期限
• 最终显示所选授权平台和期限对应的价格

后台返回的数据

price_list: [
    {
        title: "哔哩哔哩",
        children: [
            {
                id: 1,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 0,
                price: 0.01,
                address: 1,
                address_title: "一年",
                show_title: "¥0.4元"
            },
            {
                id: 19,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 1,
                price: 0.01,
                address: 0,
                address_title: "不限",
                show_title: "¥1元"
            }
        ]
    },
    {
        title: "微博",
        children: [
            {
                id: 17,
                platform: 3,
                platform_title: "微博",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "一年",
                show_title: "¥0.2元"
            },
            {
                id: 13,
                platform: 3,
                platform_title: "微博",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "五年",
                show_title: "¥1元"
            }
        ]
    },
    {
    title: "快手",
        children: [
            {
                id: 16,
                platform: 2,
                platform_title: "快手",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "不限",
                show_title: "¥0.5元"
            }
        ]
    }
]

vue 实现

原生 JavaScript 实现

const priceList = [
    {
        title: "哔哩哔哩",
        children: [
            {
                id: 1,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 0,
                price: 0.01,
                address: 1,
                address_title: "一年",
                show_title: "¥0.4元"
            },
            {
                id: 19,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 1,
                price: 0.01,
                address: 0,
                address_title: "不限",
                show_title: "¥1元"
            }
        ]
    },
    {
        title: "微博",
        children: [
            {
                id: 17,
                platform: 3,
                platform_title: "微博",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "一年",
                show_title: "¥0.2元"
            },
            {

以上就是《动态价格计算及显示方法》的详细内容，更多关于的资料请关注golang学习网公众号！