vue v-if 动态传值

Question

我是 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]看法 <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: ''       }     }下面是我上传的代码JSFIDDLEhttps://jsfiddle.net/ujjumaki/beaf9tvh/9/

Answer 1

你想使用 v-for 循环来渲染 div，并写一次条件：

模板：

  <template v-for="(value, index) in fetch">

    <div v-if="value > 0" >

      <p> DIV {{ index + 1 }} </p>

    </div>

  </template>

如果要使用数组的一部分，从 X 索引开始到 X+Y 索引结束，请使用 array.splice 并迭代新数组（从索引 1 开始并获取以下 3 个索引）：

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>

Answer 2

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

new Vue({

  el: "#app",

  data: {

    nextNumber: null,

    fetch: []

  },

  computed: {

    filteredFetch3() {

      // the v-if is solved here with a filter

      return this.fetch.filter(e => e > 3)

    },

    filteredFetch5() {

      // the v-if is solved here with a filter

      return this.fetch.filter(e => e > 5)

    }

    

  },

  methods: {

    pushNumber() {

      this.fetch.push(Number(this.nextNumber))

      this.nextNumber = null

    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <label for="numberInput">

  Number input: <input id="numberInput" v-model="nextNumber" /><button @click="pushNumber">ADD NUMBER TO FETCH LIST</button>

</label>

  <hr /> FETCH (ALL THE FETCHED NUMBERS APPEAR HERE):

  <br /> {{ fetch }}

  <hr /> ONLY NUMBERS ABOVE 3 WILL APPEAR IN THIS LIST:

  <ul>

    <li v-for="(number, i) in filteredFetch3" :key="`${ number }-${i}`">

      {{ number }}

    </li>

  </ul>

  <hr /> ONLY NUMBERS ABOVE 5 WILL APPEAR IN THIS LIST:

  <ul>

    <li v-for="(number, j) in filteredFetch5" :key="`${ number }-${j}`">

      {{ number }}

    </li>

  </ul>

</div>

Answer 3

我不知道这是你想要实现的，但这是我的理解，请检查 jsfiddle 中的这段代码以及它的外观：

 new Vue({

      el: "#app",

      mounted(){

      var totalBoxes = 10;

      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: ''

         }

       },

       computed: {

         filteredBoxes() {

           // Computed property to return only fecth where route_id is greater than 0

           return this.fetch.filter(f => f["route_id"] > 0);

         }

       }

    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

      <p>

      Filtered boxes

      </p>

      <div v-for="(f, indexFiltered) in filteredBoxes" :key="indexFiltered">

        DIV {{ f.route_id }}

      </div>

    </div>

计算属性非常适合从数据属性中的项目中查找或过滤