0

Сразу скажу, что задача присвоить не 1 класс, а несколько, в зависимости от параметра.

У меня есть массив, который я вывожу в цикле. В каждого элемента массива есть параметр status, который может принимать одно из 5-ти значений. Если бы один класс, то я делаю так

:class="{'new': el.status === 0}"

Пробовал сделать через computed

:class="statusClass"

Но как сюда передать параметр? Или как правильно сделать? Помогите пожалуйста

0

1 ответ 1

0

Для манипуляции классами во Vue, в зависимости от требований, можно использовать различные подходы:

Допустим, используя метод, который возвращает класс для элемента в зависимости от условий, на которые могут влиять наличие тех или иных данных для этого элемента (допустим 5 состояний вашего status).

Вот рабочий пример:

const app = new Vue({
  el: '#app',
  data: {
    arr: []
  },
  methods: {
    randomKey(max) {
      return Math.floor(Math.random() * Math.floor(max));
    },
    goClass(status) {
      return status < 6 ? `class_${status}` : "class_red";
    },
    randomClass(key) {
      if (key != null && key != undefined) {
        let status = this.randomKey(16);
        this.$set(this.arr, key, {
          value: `class ${status}`,
          status: status
        });
      } else {
        for (var i = 0; i < 10; i++) {
          var j = this.randomKey(6);
          this.$set(this.arr, i, {
            status: j,
            value: `class ${j}`
          });
        }
      }
    }
  },
  mounted() {
    this.randomClass();
  }
})
.p15 {
  padding: 15px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

ul>li {
  max-width: 25%;
}

ul .class_0 {
  background: #000;
  color: #fff;
}

.class_1 {
  background: #222;
  color: #fff;
}

.class_2 {
  background: #444;
  color: #fff;
}

.class_3 {
  background: #666;
}

.class_4 {
  background: #888;
}

.class_5 {
  background: #aaa;
}

.class_red {
  background: red;
  color: #fff;
}
<div id="app">
  <button @click="randomClass()">random status class</button>
  <ul>
    <li v-for="(item, key) in arr" :key="key" class="p15" :class="goClass(item.status)">
      <pre>{{item}}</pre>
      <button @click="randomClass(key)">random one status class</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

В данном примере я показал как использовать метод для манипуляции классами элементов из массива (в зависимости от состояния свойства status в объекте для каждого элемента).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.