0

根据官方 Vue.js 文档，我正在试验Vue.js（版本 2.5.16）及其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。）

该怎么办？

4

3 回答 3

4

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

于 2018-03-16T09:41:11.943 回答
1

看到你的小提琴，你正在传递名为的value道具

<counter-component value="14" />

您没有使用或（速记）动态绑定value道具v-bind:

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

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

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

或者

counter-component :value="14" />

这是你更新的小提琴

于 2018-03-16T10:00:54.867 回答
1

如v-for文档中所述，您可以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>

于 2018-03-16T09:30:11.533 回答