L5-start
репозитория, либо перейти в CodePen, чтобы взять файлы там.
git checkout L5-start
data
.
details
).
const app = Vue.createApp({ data() { return { ... details: ['50% cotton', '30% wool', '20% polyester'] } } })
li
внутри него мы добавим еще одну директиву Vue: v-for
.
<ul> <li v-for="detail in details">{{ detail }}</li> </ul>
v-for
выражения мы написали: detail in details
. Здесь details
относится к массиву details
в наших данных, а detail
- это псевдоним текущего элемента из этого массива, который мы проходим по циклу, отображая каждый элемент массива в новом li
.
li
будет отображать этот элемент массива, потому что во внутреннем HTML мы написали выражение: {{ detail }}
для отображения каждого элемента массива.
details
.
v-for
?
v-for
, мы рассмотрим другой пример в нашем приложении. Давайте добавим новый массив variants
(варианты) в наши данные:
data() { return { ... variants: [ { id: 2234, color: 'green' }, { id: 2235, color: 'blue' } ] } }
id
) и цвет (color
). Поэтому для нашей следующей задачи мы распечатаем каждый вариант цвета и используем идентификатор (id
), чтобы помочь Vue отслеживать элементы нашего списка.
<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
variant
) при циклическом просмотре массива вариантов (variants
). Но что атрибут :key
здесь делает?
:key="variant.id"
, мы используем сокращение для v-bind
, чтобы привязать идентификатор варианта id
к ключевому атрибуту key. Это дает каждому элементу DOM уникальный ключ, чтобы Vue мог ухватиться за элемент и не потерять его по мере обновления в приложении.
key
действительно помогает Vue эффективно управлять вашими элементами при их перемещении по DOM.
sizes
в объект data
.
v-for
для отображения размеров (sizes
) в списке.
git checkout L5-end
<div id="app"> <div class="nav-bar"></div> <div class="product-display"> <div class="product-container"> <div class="product-image"> <img v-bind:src="image"> </div> <div class="product-info"> <h1>{{ product }}</h1> <p v-if="inStock">In Stock</p> <p v-else>Out of Stock</p> <ul> <li v-for="detail in details">{{ detail }}</li> </ul> <!-- solution --> <ul> <li v-for="(size, index) in sizes" :id="index">{{ size }}</li> </ul> <!-- solution --> <div v-for="variant in variants" :id="variant.id"> {{ variant.color }} </div> </div> </div> </div> </div> <!-- Import App --> <script src="./main.js"></script> <!-- Mount App --> <script> const mountedApp = app.mount('#app') </script>
const app = Vue.createApp({ data() { return { product: 'Socks :: Носки', image: '../assets/images/socks_blue.jpg', inStock: true, details: ['50% cotton - хлопок', '30% wool - шерсть', '20% polyester - полиэстер'], // solution sizes: ['S', 'M', 'L', 'XL', 'Русский Размер'], // solution variants: [ { id: 2234, color: 'green - зеленые' }, { id: 2235, color: 'blue - голубые' }, ] } } })
In Stock
Out of Stock
:key=
:id=
HTML
я размещаю в этом файле между тегами body
.