Javascript Vue v-if动态传递值

我是vue的新手，这是我第一次尝试将vue视为OOP

有没有办法动态定义v-if？现在我正在起诉fetch[1]、fetch[2]和fetch[3]来运行v-if的条件。稍后我可能会有20多个div，在这种情况下，我不想定义为fetch[1]，fetch[2]…fetch[20]。有没有办法将fetch[1]的变量设置为fetch[x]，并且对于每个div，它将以1作为增量：

fetch[1] = fetch[x]  
fetch[2] = fetch[x+1]  
fetch[3] = fetch[x+1+1]

看法

剧本

下面是我上传到JSFIDLE上的代码

---

要使用v-for循环渲染div，并写入一次条件：

模板：

模板：

---

解耦的方法是控制数据-不要弄乱v-ifs在这种情况下，如果需要更复杂的数据，请使用计算属性或方法：

新Vue{ el:应用程序， 数据：{ nextNumber:null， 获取：[] }, 计算：{ 过滤蚀刻3{ //v-if在这里用一个过滤器求解 返回this.fetch.filtere=>e>3 }, 过滤蚀刻5{ //v-if在这里用一个过滤器求解 返回this.fetch.filtere=>e>5 } }, 方法：{ 门牌号码{ this.fetch.pushNumberthis.nextNumber this.nextNumber=null } } } 编号输入：将编号添加到提取列表 获取所有获取的数字显示在此处： {{fetch} 此列表中仅显示3以上的数字： {{number}} 此列表中仅显示5以上的数字： {{number}}

---

我不知道这是您想要实现的，但我理解，请在JSFIDLE中检查这一点，这里是它的外观：

新Vue{ el:应用程序， 安装{ var TotalBox=10； forlet b=0；bf[route_id]>0； } } } 过滤盒

DIV{{f.route_id}

 <div v-if="fetch[1] > '0'" >
    <p> DIV 1 </p>
 </div>
 
 <div v-if="fetch[2] > '0'" >
    <p> DIV 2 </p>
 </div>
 
 <div v-if="fetch[3] > '0'" >
    <p> DIV 3 </p>
 </div>

 mounted(){
  var totalBoxes = '3';
 
  for(let b=0; b < totalBoxes; b++){
 
   var replyDataObj1 = b;
 
           replyDataObj1={
             "route_id" : b
           }
 
    this.toListFetch= replyDataObj1; /** this will collect all the data from fetch as a list **/
    this.fetch.push(this.toListFetch);  /** list from toListFetch will be pushed to this.fetch **/
  }
 
 },
 
 data() {
       return {
         fetch:[],
         toListFetch: ''
       }
     }

  <template v-for="(value, index) in fetch">
    <div v-if="value > 0" >
      <p> DIV {{ index + 1 }} </p>
    </div>
  </template>

let filteredFetch = fetch.splice(1, 4);

  <template v-for="(value, index) in filteredFetch">
    <div v-if="value > 0" >
      <p> DIV {{ index + 1 }} </p>
    </div>
  </template>