Vue: присвоение класса в зависимости от условия

Question

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

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

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

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

:class="statusClass"

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

Answer 1

Для манипуляции классами во 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 в объекте для каждого элемента).

БЛОГ НА HUSL

Vue: присвоение класса в зависимости от условия

Ответы (1 шт):