0

Здравствуйте. Есть такой пример:

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

Вопрос мой заключается в следующем: Можно ли каким то образом во время перебора елементов менять св-ва каждого последующего елемента? Тоесть если у меня будет 10 елементов 'li' - могу ли я каждому последующему например увеличивать маргин на 5 пикселей и т.п.? (если да - как этого можно достичь.) + можно ли во время перебора(или как то иначе) обращаться к предыдущему елементу li и смотреть какие у него параметры? Хотелось бы понять какой в данном случае подход является наиболее приемлемым.

1 ответ 1

1

Исходный список при таком переборе вы изменить не можете. Но вы можете изменить вывод этого списка.

Например, вы можете использовать index, при обходе элементов списка.

В примере ниже, каждый следующий элемент получает margin-top на 5px больше предыдущего.

На счет обращения к предыдущему элементу. При переборе списка таким образом (с помощью v-for) вы этого сделать не можете. Вы можете сделать это в js коде. Воспользуйтесь функцией reduce.

Метод «arr.reduce(callback[, initialValue])» используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.

Подробнее про нее прочитайте тут.

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
    <ul id="example-1">
  <li v-for="(item, index) in items" :key="item.id" :style="{ marginTop: 5 * index + 'px' }">
        {{ item.message }}
  </li>
</ul>

7
  • А если возникнет потребность изменить не значение маргин топ, а например какое нибудь значение дата(во время перебора) - это можно реализовать? 14 фев 2018 в 0:04
  • 1
    Тогда вам необходимо будет воспользоваться фильтрами. Подробнее о них можете прочитать в документации. ru.vuejs.org/v2/guide/filters.html 14 фев 2018 в 3:26
  • Не могли бы вы привести какой нибудь самый примитивный пример связанный с фильтрами и той задачей о которой я говорил? В документации подобного примера не нашел.. (и доку всю перечитал несколько раз на эту тему и видео разные пересмотрел.) Допустим если бы необходимо было, что бы значение 'Message' у каждого последующего <li> добавляло бы по 1-й букве(какой угодно.) 14 фев 2018 в 6:03
  • Точнее не так- тут я ошибся. Моя задача не корректно поставлена в соответствии к этому коду. В общем мне просто надо понять синтакис - каким образом фильтер может влиять на св-во даты. (если я все правильно понял и это действительно возможно.) 14 фев 2018 в 6:12
  • 1
    Фильтры - это по сути простые функции, который влияют только на вывод информации, которая передается на вход этих функций. В самой функции вы можете написать любую логику для преобразования даты. Надеюсь, я ответил на ваш вопрос. 14 фев 2018 в 8:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.