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

我正在试验Vue.js（版本2.5.16）及其

v-for

指令，根据。具体地说，我正在尝试编写一个组件，该组件基于整数值属性绘制多个循环计数器

下面的代码段包含硬编码的文本值

10

，确实精确地呈现了十个圆：（）

。。。并尝试了

v-for

指令的以下变体：

• v-for=“n在计数器中”：key=“n”

  （）

• v-for=“n in{counter}”：key=“n”

  （）

但它们都无法实现可变数量的渲染圆。（注意：我使用了Vue开发人员工具来确保组件的

计数器

属性实际上具有正确的值。）

这就引出了我的问题：如何在组件属性设置的整数范围内使用

v-for

如果这是不可能的，那么

v-for

的整数范围支持实际上是毫无用处的。您希望使用硬编码范围的频率是多少

然而，我仍然想要这种行为。如果没有

v-for

，如何实现它？我可以想出几个可能的替代方案：

编写自己的渲染函数

在返回所需大小数组的计算属性中使用

计数器

属性，并在该数组上使用

v-for

将

v-for

绑定到一个数组，并挂接到

计数器

属性的更改中，以仅使用上列出的数组突变来更新该内部数组，以便Vue不会在每次更改时丢弃和重建整个DOM子结构

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

怎么办？

如中所述，您可以直接使用带有数字范围的

v-for

：

v-for

也可以取整数。在这种情况下，它将重复该模板多次

因此，您只需使用

v-for=“n in counter”

，如下例所示：

newvue({
el:“#应用程序”，
数据（）{
返回{
柜台：10
}
}
});
计数器{
高度：100px；
}

选择圈数
如中所述，您可以直接使用数值范围的
v-for
：

v-for
也可以取整数。在这种情况下，它将重复该模板多次

因此，您只需使用
v-for=“n in counter”
，如下例所示：


newvue({
el:“#应用程序”，
数据（）{
返回{
柜台：10
}
}
});
计数器{
高度：100px；
}

选择圈数
您只需将值绑定到
计数器
属性。假设您的组件名为
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>



演示：
您只需将值绑定到
计数器
属性。假设您的组件名为
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>



演示：
看到您的，您正在将名为
值的道具作为

<counter-component value="14" />

或

这是您的
看到您的，您正在将名为
值的道具作为

<counter-component value="14" />

或

这是你的
这个怎么样？它确实有效…..这个怎么样？它确实有效…..是的！这就是答案。请参阅工作：和不工作：。唯一的区别是，在一个例子中，我直接设置属性（
value=“…”
），在另一个例子中，我绑定它：（
v-bind:value=“…”
或
：value=“…”
）。我猜这是一个bug，因为对于其他所有内容，都允许直接设置值。只有对于
v-for
它才不起作用。是的！这就是答案。请参阅工作：和不工作：。唯一的区别是，在一个例子中，我直接设置属性（
value=“…”
），在另一个例子中，我绑定它：（
v-bind:value=“…”
或
：value=“…”
）。我猜这是一个bug，因为对于其他所有内容，都允许直接设置值。只有对于
v-for
它才不起作用。事实上，如果你这样做，它确实起作用。（它也适用于默认属性：），但它不适用于具有属性的组件，除非该属性已绑定。因此，我接受贝尔曼·贝达克的答案作为答案。我答案中的代码只是我想到的使用数字范围复制
v-for
的最简单方法——我没有意识到将属性传递给孩子有任何问题。我猜您在评论中指的是需要使用
：counter=“counter”
？不管是哪种方式，你当然可以接受你认为最有用的答案。事实上，如果你这样做，它确实有效。（它也适用于默认属性：），但它不适用于具有属性的组件，除非该属性已绑定。因此，我接受贝尔曼·贝达克的答案作为答案。我答案中的代码只是我想到的使用数字范围复制
v-for
的最简单方法——我没有意识到将属性传递给孩子有任何问题。我猜您在评论中指的是需要使用
：counter=“counter”
？不管是哪种方式，当然欢迎你接受你认为最有用的答案。谢谢。这是正确的。我被愚弄了
 counter-component v-bind:value="14" />

counter-component :value="14" />