javascript - VueJs 中的动态类和颜色绑定(bind)？

Question

我有一个自定义排序方法，在我的 div 上按升序或降序排列它们。我的问题是默认情况下如何让图标颜色变灰，只有当你点击图标时，它才会变成黑色，而其他图标保持灰色，就像 vuetify 数据表提供的一样 https://v15.vuetifyjs.com/en/components/data-tables .

这是我的 pen 的链接.

new Vue({
  el: '#app',
  data() {
    return {
      headers: [{
          text: "Name",
          value: "name"
        }, // changed this to name
        {
          text: "Grades",
          value: "grades"
        }
      ],
      labels: ["Andy", "Max", "John", "Travis", "Rick"],
      Grades: [99, 72, 66, 84, 91],
      sortKey: "", // added a sortKey,
      direction: 1
    }
  },
  computed: {
    tableItems() {
      let retVal = this.labels.map((label, i) => {
        return {
          name: label,
          grades: this.Grades[i]
        };
      });
      // if there is a sortKey use that
      if (this.sortKey) {
        retVal.sort((a, b) =>
          this.direction * // here multiply by the direction
          (a[this.sortKey] < b[this.sortKey] ? -1 : 1)
        );
      }
      return retVal;
    }
  },
  methods: {
    sortBy(prop) {
      if (this.sortKey === prop) {
        this.direction *= -1 // change direction to -ve or positive
      }
      this.sortKey = prop;
      console.log(prop);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout>
        <v-flex v-for="header in headers" :key="header.text" xs4 py-1>
          <span>
                {{ header.text }}
                <v-icon small @click="sortBy(header.value)">arrow_upward</v-icon>
            </span>
      </v-layout>
      <v-layout v-for="item in tableItems" :key="item.name">
        <v-flex xs4 py-1>
          <span>{{ item.name }}</span>
        </v-flex>
        <v-flex xs4 py-1>
          <span>{{item.grades}}</span>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

我正在尝试复制 vuetify 数据表提供的内容，但我无法弄清楚如何将颜色绑定(bind)到图标。我只想设置图标的颜色，然后根据标题值单击它时将其更改为黑色或灰色。

Answer 1

这是低技术含量的，但您可以使用(动态的，绑定(bind)的)类名来控制颜色，该类名关闭用于测试您的 sortKey 的方法(在图标本身或父元素上).

Forked Pen

:class="{ current: sortKey == header.value }"