动态显示授权平台期限和价格
本文介绍如何根据选择的授权平台动态显示其对应的授权期限和价格。我们将使用javascript实现这一功能，并提供vue.js的示例代码。
数据结构:
我们假设后端返回的数据结构如下：
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元" } ] }, // ...更多平台数据]
JavaScript实现:
const priceList = [ /* ... 上述JSON数据 ... */ ];const selectPlatform = document.getElementById("platformSelect");const selectPeriod = document.getElementById("periodSelect");const priceDisplay = document.getElementById("priceDisplay");function updateOptions() { const selectedPlatform = selectPlatform.value; const platformData = priceList.find(p => p.platform === parseInt(selectedPlatform)); selectPeriod.innerHTML = ''; // 清空之前的选项 if (platformData) { platformData.children.forEach(period => { const option = document.createElement('option'); option.value = period.address; option.text = period.address_title; selectPeriod.appendChild(option); }); updatePrice(); } else { priceDisplay.textContent = "请选择平台"; }}function updatePrice() { const selectedPlatform = selectPlatform.value; const selectedPeriod = selectPeriod.value; const platformData = priceList.find(p => p.platform === parseInt(selectedPlatform)); const periodData = platformData.children.find(p => p.address === parseInt(selectedPeriod)); priceDisplay.textContent = periodData ? periodData.show_title : "请选择期限";}// 初始化平台选择框priceList.forEach(platform => { const option = document.createElement('option'); option.value = platform.platform; option.text = platform.title; selectPlatform.appendChild(option);});selectPlatform.addEventListener('change', updateOptions);selectPeriod.addEventListener('change', updatePrice);// 初始显示updateOptions();
HTML结构 (示例):
Vue.js实现 (简化版):
{{ platform.title }} {{ period.address_title }}export default { data() { return { priceList: [ /* ... 上述JSON数据 ... */ ], selectedPlatform: null, selectedPeriod: null, price: '', periodOptions: [] }; }, computed: { platformData() { return this.priceList.find(p => p.platform === this.selectedPlatform); } }, methods: { updateOptions() { this.periodOptions = this.platformData ? this.platformData.children : []; this.updatePrice(); }, updatePrice() { const periodData = this.periodOptions.find(p => p.address === this.selectedPeriod); this.price = periodData ? periodData.show_title : ''; } }, mounted() { if (this.priceList.length > 0) { this.selectedPlatform = this.priceList[0].platform; this.updateOptions(); } }};价格: {{ price }}
记住替换/* ... 上述JSON数据 ... */为你的实际数据。 这两个示例都实现了根据平台选择动态更新期限选项和价格的功能。 Vue.js版本更简洁，并利用了数据绑定和响应式特性。 选择哪个版本取决于你的项目需求和技术栈。
以上就是如何实现根据选择不同的授权平台动态显示其对应的授权期限和价格？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561199.html
微信扫一扫 
支付宝扫一扫 
