Vue：动态类中的数组长度条件

Question

我正在通过 Firestore 集合 Colours 循环，并希望使用基于数组属性 alpha 长度的条件动态类。

我试过了：

<v-card v-for="Colour in Colours" :key="Colour.id">
  <v-text-field v-model="Colour.alpha" :value="Colour.alpha" :class="Colour.alpha.length >= '1' ? 'greenClass' : 'blueClass'"></v-text-field>

哪个没用，一直在寻找答案，我能找到的唯一相关建议是：

v-bind:class="{ 'greenClass': Colour.alpha.length >= 1 }"

这也不起作用。

可以这样使用.length吗？

另外，我想有多个条件类，例如。

Colour.alpha.length == 0 -> assign class 'white'
Colour.alpha.length == 1 -> assign class 'blue'
Colour.alpha.length == 2 -> assign class 'green'
Colour.alpha.length >= 3 -> assign class 'red'

但我感觉这更不可能实现（至少我不知道如何实现）

任何建议将不胜感激。

Answer 1

绑定 CSS 类时，您需要使用 object syntax 或 array syntax

1. 你的第一个例子都不是，所以它不起作用只传递一个字符串实际上工作得很好......
2. 您的第二个示例看起来像正确使用类语法并且应该可以工作。最可能的原因是Colour.alpha 并不总是被分配（undefined 或null 而不是空数组[]）。所以检查你的数据...

const vm = new Vue({
  el: '#app',
  data() {
    return {
      Colours: [
       { id: 1, alpha: [1, 2, 3]},
       { id: 2, alpha: [1, 2]},
       { id: 3, alpha: [1]},
       { id: 4, alpha: []}
      ],
      alphaToClass: ['white', 'blue', 'green', 'red']
    }
  },
  methods: {
    getColorClass(alpha) {
      const index = alpha ? Math.min(alpha.length, 3) : 0
      return this.alphaToClass[index]    
    }
  }
})

.white {
  background-color: white
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

.red {
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div v-for="Colour in Colours" :key="Colour.id">
    <input type="text" v-model="Colour.alpha" :class="getColorClass(Colour.alpha)" />
  </div>
</div>