VueJs 中的动态类和颜色绑定？

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 数据表提供的内容，但我无法弄清楚如何将颜色绑定到图标。我只想设置图标的颜色，然后在单击时根据标题值将其更改为黑色或灰色。

Answer 1

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

Forked Pen

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

Answer 2

你可以创建一个方法...

sortIconClass(val) {
  return (this.direction===1 && val===this.sortKey)?'black--text':'grey--text'
}

然后像...一样使用它

<v-icon small @click="sortBy(header.value)" :class="sortIconClass(header.value)">arrow_upward</v-icon>

Codeply demo

对于图标，你可以做类似的事情......

<v-icon small @click="sortBy(header.value)" :class="sortIconClass(header.value)">{{sortIcon(header.value)}}</v-icon>

sortIcon(val) {
    return (this.direction===1 && val===this.sortKey)?'arrow_upward':'arrow_downward'
}

Updated Codeply

Answer 3

图标本身是一个有自己状态的组件，你也可以这样做，创建一个单独的文件组件 Icon.vue，然后将它导入到你正在使用的 vue 实例中

<template>
  <i @click="setActive" v-bind:class="{ active: isActive }"></i>
</template>

<script>
  data() {
    return {
      active: false
    }
  },
  methods: {
    setActive() {
      active = true
    }
  },
  computed: {
    isActive() {
    return active
  }
}
</script>

<style scoped>
  .active {
    /* do whatever */
  }
</style>

导入：

import Icon from 'wherever/icon/is.vue'
/* ... */
components: {
  'icon': Icon,
}