Рубрики
Без рубрики

Vue 3 – V-для

Проверьте мои книги на Amazon в https://www.amazon.com/john-au-uyeung/e/b08ft5nt62 Подписаться на мой … Теги с Vue, WebDev, начинающими, JavaScript.

Проверьте мои книги на Amazon в https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Подписаться на мой список электронной почты сейчас http://jauyeung.net/subscribe/

Vue 3 – это вверх и грядущая версия Vue Front Cont Framework.

Он основан на популярности и простоте использования Vue 2.

В этой статье мы посмотрим на рендеринг массивов и объектов с V-для Отказ

V-если с V-для

Мы не должны использовать V-если и V-для вместе.

Это потому, что V-для делает все, а потом V-если Проверяет каждый предмет, нужно ли они оказаны.

Вместо этого мы должны заранее отфильтровать элементы с вычисленными свойствами и используем это с помощью V-для Отказ

Когда они используются вместе, V-для имеет более высокий приоритет над V-если Отказ

Рендеринг списка

Мы можем сделать массив предметов на экран с V-для Отказ

Например, мы можем написать:




  
    App
    
  
  
    
{{ p.name }}

Чтобы сделать предметы в люди массив на экран.

Мы используем V-для Директива для цикла через каждую запись и визуализацию каждого элемента на экран.

Мы также можем получить индекс товара, написав:




  
    App
    
  
  
    
{{index}} - {{ p.name }}

Тогда мы получаем индекс товара с Индекс Отказ

Мы использовали в в петлю через массив, но мы можем заменить в с Чтобы сделать его напоминанием для петли:

v – для с объектом

V-для Также работает для объектов.

Например, мы можем написать:




  
    App
    
  
  
    
{{value}}

Чтобы закрепить значения объекта и отобразить каждое значение.

Чтобы получить ключ, мы можем добавить второй параметр на петлю:




  
    App
    
  
  
    
{{name}}: {{value}}

Имя имеет ключ от объекта.

3-й пункт в списке разделения запяты является индекс:




  
    App
    
  
  
    
{{index}} - {{name}}: {{value}}

Заключение

Мы можем представлять объекты и массивы с V-для Директива.

Пост Vue 3 – V-для появился первым на Веб dev Отказ

Оригинал: “https://dev.to/aumayeung/vue-3-v-for-4f9b”