Блог

Главная - Вопросы по программированию - Как написать цикл for, который начинается с 0 и показывает каждый третий индекс, включая индекс 0 в Vue с v-for?

Как написать цикл for, который начинается с 0 и показывает каждый третий индекс, включая индекс 0 в Vue с v-for?

#vue.js #vuejs2 #v-for

Вопрос:

Как я могу показать этот код в Vuejs с помощью v-for?

Я хотел бы показать данные, начинающиеся с индекса 0, а затем данные с каждым третьим индексом до индекса 15. Данные.длина 16. Как 0,3,6,9,12,15

 for( i = 0; i < data.length; i =3) {}

Ответ №1:

Вы можете сначала подготовить данные в computed свойствах:

 new Vue({
  el: "#app",
  data() {
    return {
      items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
    }
  },
  computed: {
    everyThird: function() {
      const thirds = []
      for(let i = 0; i < this.items.length; i =3) {
        thirds.push(this.items[i])
      }
      return thirds;
    }
  },
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <li v-for="(item, i) in everyThird" :key="i">
    {{ item }}
  </li>
</div>

Ответ №2:

Если вам нужно настроить циклическое выполнение. Вам нужно сделать это внутри вычисляемого свойства и вернуть массив. Поэтому создайте массив, содержащий элементы с индексом, кратным 3, в вычисляемом свойстве, а затем используйте его в своем v-for. В своем компоненте вы делаете это

 <div>
  <li v-for="(item, index) in elementInThirdPlace" :key="index">
    {{ item }}
  </li></div>

export default {
//your lists of items are here
 data () { 
     return { items: [1,2,3,4,5,6,6] } 
  },
  computed: {
   elementInThirdPlace () {
    return this.items.filter((element, index) => index % 3 == 0 )
   }
 }
}

}

Метки: , ,