javascript之VueJs 中的动态类和颜色绑定(bind)_编程设计

我有一个自定义排序方法，在我的 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)到图标。我只想设置图标的颜色，然后根据标题值单击它时将其更改为黑色或灰色。

请您参考如下方法:

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

Forked Pen

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