问Vue `v-for`指令，整数范围绑定到component属性？

EN

我正在试验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指令的变体：

• v-for="n in counter" :key="n" (小提琴)
• v-for="n in {counter}" :key="n" (小提琴)

但这两种方法都没有实现不同数量的呈现圆圈。(注意:我使用了Vue developer工具来确保组件的counter属性实际上保持正确的值。)

这就引出了我的问题:如何使用由组件的属性设置的整数范围的v-for ？。

如果这是不可能的，那么v-for的整数范围支持确实是无用的。一个人要多久使用一次硬编码的范围？

不过，我还是想要这种行为。如果没有v-for，如何实现它？我可以想出几种可能的选择：

1. 写我自己的渲染函数。
2. 在返回所需大小的数组的计算属性中使用counter属性，并在该数组上使用v-for。
3. 将v-for绑定到数组并挂钩到counter属性的更改中，仅使用数组变化检测页面上列出的数组突变来更新该内部数组，这样Vue不会在每次更改时丢弃和重建整个DOM子结构。

对于这样一个简单的用例，选项1似乎是一吨工作。选项2很简单，但我担心它会导致Vue丢弃和重新生成所有的--每次更改时重复的子元素。选项3似乎会表现最好，如果可能的话，但我真的不知道如何去做。(正如我所说，我第一次调查Vue。)

该怎么办呢？