Как добавить v-bind:style к первому элементу, созданному в цикле v-for?

Question

[obemgcabazn]

Делаю слайдер. Чтобы перемещать его, меняю margin первого элемента. Margin вычисляется по условию.
Элементы создаются через v-for, нужно первому элементу добавить v-bind:style

Как это сделать?

Answer 1

[alexalexes]

У блока c v-for нужно объявить индекс:
v-for="(item, index) in items"
тогда:

v-bind:style="index == 0 ? {стили для первого элемента} : {}"

Comments

[obemgcabazn]

Не получается. Не понимаю почему

<div class="slider-item"
    v-for="(slide, index) in slides"
    :style=" index == 0 ? '{ marginLeft: sliderShift}' : ''"
>

[Михаил]

Я из документации вообще и не понял что туда можно произвольные выражения подсовывать, но смотрю работает.
obemgcabazn, вам нужно объект указывать, а не строку
" index == 0 ? { marginLeft: sliderShift} : {}"

[alexalexes]

Михаил, спасибо, что поправили.
Директива v-bind эквивалента работе правой части оператора присваивания, как в обычном коде JS, свойства Vue - вычисляемые, значит можно и свою вычисляемую логику подсунуть, вопрос лишь в том, как это отразится при рендеринге. Поэтому, нужно помнить, чтобы вычисления были не слишком тяжелые.