Vuejs добавить класс динамически

Question

Я использую Vue-Cli, и это мой код. Это работает отлично, но я хочу перечислить их как массив с v-for, а не вручную, как показано ниже. Я не знаю, как сопоставить каждый элемент динамически.

<template>
      <div class="slides">
        <div class="slide-1" :class="{active:selected == 1}">
          <figure class="photo">
            <img
          src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
              alt
            >
          </figure>
        </div>
        <div class="slide-2" :class="{active:selected == 2}">
          <figure class="photo">
            <img
              src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1504&q=80"
              alt
            >
          </figure>
        </div>
        <div class="slide-3" :class="{active:selected == 3}">
          <figure class="photo">
            <img
              src="https://images.unsplash.com/photo-1474606030380-107829a22fc6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
          alt
            >
          </figure>
        </div>
      </div>

      <nav>
        <h2><span @click="selected = 1" :class="{clicked:selected == 1}">new york</span></h2>
        <h2><span @click="selected = 2" :class="{clicked:selected == 2}">paris</span></h2>
        <h2><span @click="selected = 3" :class="{clicked:selected == 3}">london</span></h2>
      </nav>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      selected: 1
    }
  }
};
</script>

Answer 1

Вы можете сделать это следующим образом:

<template>
      <div class="slides">
        <div v-for="(item,index) in slides"
             :key="index"
             :class="[selected === item.id ? 'active' : '', 'slide-'+item.id]">
          <figure class="photo">
            <img :src="item.src" alt>
          </figure>
        </div>
      </div>

      <nav>
        <h2 v-for="(item, index) in slides" :key="index">
          <span @click="selected = item.id" :class="{clicked:selected === 1}">
            {{item.title}}
          </span>
        </h2>
      </nav>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      slides: [
        {
          id: 1,
          title: 'new york',
          src: 'https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80',
        },
        {
          title: 'paris',
          id: 2,
          src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1504&q=80',
        },
        {
          title: 'london',
          id: 3,
          src: 'https://images.unsplash.com/photo-1474606030380-107829a22fc6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
        }
      ],
      selected: 1
    }
  }
};

Элементы, которые вы зацикливаете, должны быть там как объект, и затем вы можете зациклить его и выполнить логику.

Answer 2

Вот еще в https://vuejs.org/v2/guide/class-and-style.html

<div :class="{ active: isActive }"></div>

Класс 'активный' будет добавлен, если this.isActive == true