Question

我厌倦了使用vue.js渲染svg线图这是我的代码。

<template lang="html">
  <div class="">

    <div v-for="(scorex,key) in score">
        <p>{{x += 50}}</p>
    </div>
    <svg height="500" width="500" style="background-color:silver;">

<line v-for="(marks,key) in score" :x1="x+50" :y1="marks" :x2="x2+50":y2="score[key]" style="stroke:rgb(255,0,0);stroke-width:5" />


</svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: [250, 225, 500, 175],
      x: 0,
      x2: 50
    };
  }
};
</script>

对于参数 x和x1 ，我需要先传递值50，然后需要将其递增50，直到循环结束。

我所做的是在数据对象中初始化x和x2并尝试在v-for语句中递增它。但它没有用。

Answer 1

正如我所说，你想要获得 x1 行：x，x + 50，x + 100 ......， x2 ：x2，x2 + 50，x2 + 100 ...... 我们可以使用索引

v-for还支持当前项索引的可选第二个参数。

您的代码将是

<line v-for="(marks, index) in score" 
  :x1="x+index*50" 
  :y1="marks" 
  :x2="x2+index*50"
  :y2="marks" 
  style="stroke:rgb(255,0,0);stroke-width:5" />

vuejs如何增加v-for

1 个答案: