Question

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

以下代码段包含硬编码的文字值10，确实可以准确呈现十个圆圈：（official Vue.js documentation）

    <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的情况下实现它？我可以想到几种可能的替代方案：

编写我自己的渲染功能。
使用 computed 属性中的counter属性，该属性返回所需大小的数组，并在该数组上使用v-for。
将v-for绑定到数组并挂钩counter属性的更改，以仅使用jsfiddle上列出的数组突变来更新该内部数组，以便 Vue < / em>不会在每次更改时丢弃并重建整个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

Answer 2

正如v-for docs中所述，您可以直接使用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>

Answer 3

看到您的fiddle，您将名为value的道具传递为

<counter-component value="14" />

您未使用value或v-bind（简写）动态约束:道具

因此，您作为14传递的数字value将被评估为字符串

所以绑定道具将其视为数字

 counter-component v-bind:value="14" />

或者

counter-component :value="14" />

这是您的updated fiddle

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

3 个答案: