有没有办法将索引设置为 1 而不是 0,因为在代码中的大多数地方使用索引+1 有点伤害我。
Vue.component('BuySubscription', {
template: '#buy-subscription',
data() {
return({
perMonth: 19,
selectedSubscription: 0
})
},
methods: {
fnSelectedSubscription() {
console.log('you have selected:' + this.selectedSubscription * this.perMonth);
},
fnPluralize(i) {
return (i > 0) ? 's': ''
},
fnInsertIndent(i) {
i = i+1;
if (i === 1) {
return '........................'
} else if(i <= 9) {
return '......................'
} else if (i <= 12){
return '....................'
}
}
}
});
new Vue({
el: '#app',
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app" class="col-lg-6 d-flex align-items-center">
<buy-subscription></buy-subscription>
</div>
<script type="text/x-template" id="buy-subscription">
<div>
<p>Please select subscription to purchase.</p>
<div class="form-group">
<select class="form-control" v-model="selectedSubscription">
<option value="0" selected>Select Subscription...</option>
<option :value="index+1" v-for="(val, index) in 12">
{{index+1}} Month{{ fnPluralize(index) }} {{ fnInsertIndent(index) }} ${{perMonth * (index+1)}}
</option>
</select>
</div>
<h1 class="text-center">${{selectedSubscription * perMonth}}.00</h1>
<button class="btn btn-warning btn-block"
:class="{disabled: selectedSubscription <= 0}"
@click="fnSelectedSubscription">
Buy now with <i>PayPal</i>
</button>
</div>
</script>
最佳答案
当您使用range v-for
时,值
从 1 开始,而索引从零开始。
因此,在您的情况下,只需使用该值即可。
console.clear()
new Vue({
el:"#app"
})
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<div v-for="val, index in 10">Value: {{val}}, Index: {{index}}</div>
</div>
关于javascript - 如何将索引/键值设置为 1 而不是 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45605727/