Vue `v-for`指令，整数范围绑定到component属性？
我正在试验Vue.js (版本2.5.16)及其v-for指令，根据官方Vue.js文档，它应该能够根据某个整数范围重复一个元素。具体来说，我试图编写一个基于整数值属性绘制许多循环计数器的组件。
下面的代码片段包含硬编码的文字值10，确实准确地呈现了十个圆圈：(小提琴)
<svg class="counter" v-for="n in 10" :key="n"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 10 10">
<circle cx="5" cy="5" r="5"></circle>
</svg>然而，硬编码的价值是有限的效用。我已将整数值属性添加到组件中，如下所示：(类型记录)
export default Vue.extend({
props: {
counter: Number
},
.....。并尝试了以下v-for指令的变体：
但这两种方法都没有实现不同数量的呈现圆圈。(注意:我使用了Vue developer工具来确保组件的counter属性实际上保持正确的值。)
这就引出了我的问题:如何使用由组件的属性设置的整数范围的v-for ？。
如果这是不可能的，那么v-for的整数范围支持确实是无用的。一个人要多久使用一次硬编码的范围？
不过，我还是想要这种行为。如果没有v-for，如何实现它？我可以想出几种可能的选择：
- 写我自己的渲染函数。
- 在返回所需大小的数组的计算属性中使用
counter属性，并在该数组上使用v-for。 - 将
v-for绑定到数组并挂钩到counter属性的更改中，仅使用数组变化检测页面上列出的数组突变来更新该内部数组，这样Vue不会在每次更改时丢弃和重建整个DOM子结构。
对于这样一个简单的用例，选项1似乎是一吨工作。选项2很简单，但我担心它会导致Vue丢弃和重新生成所有的--每次更改时重复的子元素。选项3似乎会表现最好，如果可能的话，但我真的不知道如何去做。(正如我所说，我第一次调查Vue。)
该怎么办呢？
回答 3
Stack Overflow用户
发布于 2018-03-16 09:41:11
您只需将值绑定到您的counter属性，让我们假设您的组件名为circ。
<div id="app">
<circ :counter="10"></circ>
</div>
<template id="circ">
<div>
<svg class="counter" v-for="n in counter" :key="n"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 10 10">
<circle cx="5" cy="5" r="5"></circle>
</svg>
</div>
</template>演示：http://jsbin.com/vebijiyini/edit?html,js,output
Stack Overflow用户
发布于 2018-03-16 09:30:11
正如在文档中提到的，您可以直接使用具有数值范围的v-for：
v-for也可以取一个整数。在这种情况下，它将多次重复模板。
所以您可以只使用v-for="n in counter"，如下面的示例所示：
new Vue({
el: '#app',
data() {
return {
counter: 10
}
}
});.counter {
height: 100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>
<div id="app">
<div>
<h3>Select number of circles</h3>
<input type="number" v-model.number="counter" />
</div>
<svg class="counter" v-for="n in counter" :key="n" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10">
<circle cx="5" cy="5" r="5"></circle>
</svg>
</div>
https://stackoverflow.com/questions/49316942
复制相似问题
腾讯云开发者
