将输入参数绑定到 VueJS 中的 URL 参数 [英] Binding input parameters to URL params in VueJS
问题描述
是否有一种简单的方法来绑定输入参数,允许人们为 Javascript 计算添加书签?
var app = new Vue({el: '#app',数据: {//虚拟数据磁盘大小:100,成本:0.05,项目: [{频率:每天",数量:3,比例:5},{频率:每周",数量:0,比例:10},{频率:每年",数量:0,比例:20}],},计算:{初始投资成本() {返回数字(this.disksize * this.cost)},小计大小(){返回 this.items.map((item) => {返回数量(item.qty * item.ratio/100 * this.disksize)});},小计成本(){返回 this.items.map((item) => {返回数量(item.qty * item.ratio/100 * this.disksize * this.cost)});},小计(){返回 this.items.reduce((subTotals, item) => {return Number(subTotals + item.qty * item.ratio/100 * this.disksize * this.cost)}, 0);},全部的() {返回数字(this.initialCost + this.subTotals)}}});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><p><label>磁盘大小:<input type=number v-model.number="disksize">GB</label></p><p><label>EBS 成本:<input type=number step="0.001" v-model.number="cost">每 GB 月存储的数据</label></p><p><label>初始 EBS 磁盘的成本:<input readonly :value="initialCost.toFixed(2)">每月 USD</label></p><h3>EBS 快照<p>EBS 快照是增量的,因此如果您每小时创建一个快照,每个快照只会备份在过去一小时内写入卷的更改.</p><表格标题="保留"><thead align="left"><th>频率</th><th>数量</th><th>比率</th><th>大小</th><th>每月成本</th></thead><tr v-for="(item, index) in items"><td><input readonly :value="item.freq.charAt(0).toUpperCase() + item.freq.slice(1)" size="10"></td><td><input type="number" min="0" max="100" v-model.number="item.qty" size="10"></td><td><input type="number" min="0" max="100" v-model.number="item.ratio" size="3">%</td><td><input type="number" step="0.01" :value="subtotalSize[index].toFixed(2)" readonly size="10">GB</td><td><input type="number" step="0.01" :value="subtotalCost[index].toFixed(2)" readonly size="10">USD</td></tr></tbody><p><标签>总计{{initialCost.toFixed(2)}} 初始成本 + {{subTotals.toFixed(2)}} 快照 = <strong>{{total.toFixed(2)}} 美元/月</strong>标签></p>我不想使用 npm 等.只是预先打包的 URL,如 https://unpkg.com/vue-router/dist/vue-router.js ... 如果那是解决方案.我不确定.
https://example.com/?disk=100&quantity=3&ratio=5
数量/比率实际上可以重复,不确定 URL 参数中的 at 是什么样子.有什么提示吗?
解决方案 如果您只想获取 URL 参数的值并将它们传递给组件,您可以使用 Javascript 的 URLSearchParams()
方法(这在 IE 11 中不起作用,但可能有一个 polyfill).
function getURLParam (param) {const queryString = window.location.search//来自 URL 的查询字符串const params = new URLSearchParams(queryString)//将查询字符串解析为对象return params.get(param)//获取传入函数的参数名的值}
用上面的代码进行实验.我无法确定您需要的确切实现,但这应该足以作为一个好的起点.
Is there an easy way to bind the input parameters, to allow people to bookmark the Javascript calculation?
var app = new Vue({
el: '#app',
data: {
// dummy data
disksize: 100,
cost: 0.05,
items: [{
freq: "daily",
qty: 3,
ratio: 5
},
{
freq: "weekly",
qty: 0,
ratio: 10
},
{
freq: "yearly",
qty: 0,
ratio: 20
}
],
},
computed: {
initialCost() {
return Number(this.disksize * this.cost)
},
subtotalSize() {
return this.items.map((item) => {
return Number(item.qty * item.ratio / 100 * this.disksize)
});
},
subtotalCost() {
return this.items.map((item) => {
return Number(item.qty * item.ratio / 100 * this.disksize * this.cost)
});
},
subTotals() {
return this.items.reduce((subTotals, item) => {
return Number(subTotals + item.qty * item.ratio / 100 * this.disksize * this.cost)
}, 0);
},
total() {
return Number(this.initialCost + this.subTotals)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p><label>Size of disk: <input type=number v-model.number="disksize">GB</label></p>
<p><label>EBS cost: <input type=number step="0.001" v-model.number="cost">per GB-month of data stored</label></p>
<p><label>Cost of initial EBS disk: <input readonly :value="initialCost.toFixed(2)">USD per month</label></p>
<h3>
EBS snapshots
</h3>
<p>
EBS snapshots are incremental, so if you created a snapshot hourly each snapshot would only be backing up the changes that had been written to the volume in the last hour.
</p>
<table title="Retention">
<thead align="left">
<th>Frequency</th>
<th>Quantity</th>
<th>Ratio</th>
<th>Size</th>
<th>Cost per month</th>
</thead>
<tbody>
<tr v-for="(item, index) in items">
<td><input readonly :value="item.freq.charAt(0).toUpperCase() + item.freq.slice(1)" size="10"></td>
<td><input type="number" min="0" max="100" v-model.number="item.qty" size="10"></td>
<td><input type="number" min="0" max="100" v-model.number="item.ratio" size="3">%</td>
<td><input type="number" step="0.01" :value="subtotalSize[index].toFixed(2)" readonly size="10">GB</td>
<td><input type="number" step="0.01" :value="subtotalCost[index].toFixed(2)" readonly size="10">USD</td>
</tr>
</tbody>
</table>
<p>
<label>Total
{{initialCost.toFixed(2)}} initial cost + {{subTotals.toFixed(2)}} snapshots = <strong>{{total.toFixed(2)}} USD per month</strong>
</label>
</p>
</div>
I don’t want to use npm et al. Just prepackaged URLs like https://unpkg.com/vue-router/dist/vue-router.js ... if that's the solution. I'm not sure.
https://example.com/?disk=100&quantity=3&ratio=5
Quantity/Ratio can actually repeat, not sure what the at looks like in URL params. Any hints?
解决方案 If you simply want to get the values of a URL parameter and pass them along to a component, you can make use of Javascript's URLSearchParams()
method (this won't work in IE 11, but a polyfill might be available).
function getURLParam (param) {
const queryString = window.location.search // query string from URL
const params = new URLSearchParams(queryString) // parse query string into object
return params.get(param) // get the value of the param name passed into function
}
Experiment with the code above. I can't be sure of the exact implementation you need, but this should suffice as a good starting point.
这篇关于将输入参数绑定到 VueJS 中的 URL 参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆