В VueJS цикл v-for используется в каждом проекте, он позволяет вам писать циклы for в коде шаблона.
В самом простом использовании они используются следующим образом.
<ul>
<li v-for='product in products'>
{{ product.name }}
</li>
</ul>
Однако в этой статье я расскажу о шести способах сделать вашv-forКод стал более точным, предсказуемым и надежным.
Давайте начнем.
1. Всегда используйте ключ в цикле v-for
Во-первых, мы обсудим общие рекомендации, которые уже известны большинству разработчиков Vue — вv-forиспользуется в цикле:key. Установив уникальное ключевое свойство, он гарантирует, что компонент работает так, как вы ожидаете.
Если мы не будем использовать ключи, Vue попытается сделать DOM максимально эффективным, что может означатьv-forЭлементы могут демонстрировать неупорядоченное или другое непредсказуемое поведение. Если у нас есть уникальная ключевая ссылка на каждый элемент, то мы можем лучше предсказать, как будет вести себя DOM.
<ul>
<li
v-for='product in products'
:key='product._id'
>
{{ product.name }}
</li>
</ul>
2. Перебрать диапазон
Хотя в большинстве случаев,v-forИспользуется для перебора массивов или объектов, но в некоторых случаях мы определенно хотим, чтобы цикл выполнялся только определенное количество раз.
Например, предположим, что мы создаем систему нумерации страниц для интернет-магазина и хотим отображать только 10 товаров на странице. Используя переменную для отслеживания текущего номера страницы, мы можем обрабатывать нумерацию страниц следующим образом.
<ul>
<li v-for='index in 10' :key='index'>
{{ products[page * 10 + index] }}
</li>
</ul>
3. Не используйте v-if в циклах
Общая ошибка - использовать суперv-ifфильтроватьv-forзацикливание данных. Хотя это кажется интуитивно понятным, это вызывает огромные проблемы с производительностью — приоритет имеет VueJS.v-forвместоv-ifинструкция.
Это означает, что ваш компонент будет перебирать каждый элемент, а затем проверятьv-ifУсловие для определения, должно ли оно отображаться. Таким образом, вы будете перебирать каждый элемент массива независимо от условия.
не делай этого:
// BAD CODE!
<ul>
<li
v-for='product in products'
:key='product._id'
v-if='product.price < 50'
>
{{ product.name }}
</li>
</ul>
4. Вместо этого используйте вычисляемые свойства или методы
Чтобы избежать вышеуказанной проблемы, мы должны фильтровать данные в шаблоне, прежде чем перебирать его. Есть два очень похожих метода:
- Использование вычисляемых свойств
- Использовать метод фильтра
Давайте кратко рассмотрим оба метода.
Во-первых, нам просто нужно установить вычисляемое свойство, чтобы получить ту же функциональность, что и в предыдущем v-if, код должен выглядеть так.
<ul>
<li v-for='products in productsUnderFifty' :key='product._id' >
{{ product.name }}
</li>
</ul>
// ...
<script>
export default {
data () {
return {
products: []
}
},
computed: {
productsUnderFifty: function () {
return this.products.filter(product => product.price < 50)
}
}
}
</script>
Код ниже почти такой же, но использование методов меняет способ доступа к значениям в шаблоне, и если мы хотим иметь возможность передавать переменные в фильтры, то методы — лучший вариант.
<ul>
<li v-for='products in productsUnderPrice(50)' :key='product._id' >
{{ product.name }}
</li>
</ul>
// ...
<script>
export default {
data () {
return {
products: []
}
},
methods: {
productsUnderPrice (price) {
return this.products.filter(product => product.price < price)
}
}
}
</script>
5. Доступ к индексу элемента в цикле
Помимо обхода массива и доступа к каждому элементу, мы также можем отслеживать индекс каждого элемента.
Для этого мы должны добавить значение индекса после элемента, это очень просто и может использоваться для разбиения на страницы, отображения индекса списка, отображения рейтинга и т. д.
<ul>
<li v-for='(products, index) in products' :key='product._id' >
Product #{{ index }}: {{ product.name }}
</li>
</ul>
6. Пересеките объект
До сих пор мы рассматривали только использованиеv-forИтерирует массив, но мы можем легко перебирать пары ключ-значение объекта.
Подобно доступу к индексу элемента, мы должны добавить в цикл еще одно значение. Если мы перебираем объект с одним аргументом, мы перебираем все элементы.
Если мы добавим еще один параметр, мы получим элементы и ключ, если мы добавим третий, мы также сможем получить доступv-forИндекс цикла.
Предположим, мы хотим перебрать каждое свойство в продукте.
<ul>
<li v-for='(products, index) in products' :key='product._id' >
<span v-for='(item, key, index) in product' :key='key'>
{{ item }}
</span>
</li>
</ul>
Суммировать
Надеюсь, эта короткая статья научила вас чему-то об использовании Vue.v-forЛучшие практики для директив.
Есть ли у вас другие предложения?
Связанное Чтение:12 советов и приемов, которые сделают вас лучшим разработчиком Vue.js
оригинал:узнать V UE.co/2020/02/6 - Он…
переводить:дуниб
Если это вдохновляет и помогает вам, вы можете щелкнуть по нему, добавить в закладки или оставить сообщение для обсуждения — это величайшее поощрение для автора.
Об авторе: Веб-инженер, специалист по разработке полного стека, постоянно обучающийся.
Теперь обратите внимание на общедоступную учетную запись WeChat «Выбор иностранного языка переднего плана», а также отправьте информацию о онлайн-дисках высококачественных видеокурсов определенной сети, это определенно сэкономит вам много денег!