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

Posted 2023-02-23

【中文标题】VueJs 中的动态类和颜色绑定？

【英文标题】：Dynamic class and color binding in VueJs?

【发布时间】：2020-03-27 11:21:09

【问题描述】：

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

【参考方案1】：

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

Forked Pen

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

【讨论】：

感谢您的帮助，但我可能有一个后续问题，即如何根据订单是降序还是升序使图标在向下和向上之间切换。抱歉，我也应该将此添加到问题中。

你可能想要计算sortKey == header.value，这样你就可以使用类似的东西对其进行迭代：:class=" current: sortKey == header.value, down: sortKey == header.value && direction == -1 "（我更新了 CodePen，down 类使用 CSS transform: rotate( 180 deg )完成方向改变。

非常感谢您的帮助。

【参考方案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

【讨论】：

这太棒了。我可能有一个后续问题，即如何根据订单是降序还是升序来使图标在向下和向上之间切换。抱歉，我也应该将此添加到问题中。

【参考方案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,

【讨论】：

我很抱歉，但我不认为这是我想要做的。我只想设置图标的颜色，然后在单击时根据标题值将其更改为黑色或灰色。

但是你想复制 vuetify 的图标还是想使用他们的图标？