Vue `v-for` 指令的整数范围绑定到组件属性？

Question

我正在试验Vue.js（版本 2.5.16）及其指令，根据官方 Vue.js 文档v-for，该指令应该能够根据某个整数范围重复元素。具体来说，我正在尝试编写一个组件，该组件根据整数值属性绘制多个循环计数器。

下面的代码片段包含硬编码的文字值10，确实精确地渲染了十个圆圈：( jsfiddle )

    <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>

然而，对值进行硬编码的作用有限。我已向我的组件添加了一个整数值属性，如下所示：（typescript）

export default Vue.extend({
    props: {
        counter: Number
    },
    ...

...并尝试了该指令的以下变体v-for：

• v-for="n in counter" :key="n"（jsfiddle）
• v-for="n in {counter}" :key="n"（jsfiddle）

但它们都没有实现可变数量的渲染圆。（注意：我使用了 Vue 开发人员工具来确保counter组件的属性实际上具有正确的值。）

这让我想到了我的问题：如何使用v-for组件属性设置的整数范围？

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

但是，我仍然想要这种行为。如果没有 ，人们将如何实现它v-for？我可以想到几种可能的替代方案：

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

对于这样一个简单的用例，选项 1 似乎需要大量工作。选项 2 非常简单，但我担心它会导致Vue在每次更改时丢弃并重新生成所有重复的子元素。如果可能的话，选项 3 似乎会表现最好，但我真的不知道如何去做。（正如我所说，我是第一次研究Vue 。）

该怎么办？

Answer 1

您只需将值绑定到您的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