像 Twitter 一样，我想在每次点击时更改点赞图标的颜色

Question

我正在制作类似 Twitter 按钮的东西。

我想改变图标按钮的颜色。

点击按钮时，灰变红成功

但是我不知道怎么把它从红色变成灰色。

我正在使用 javascript 和 vue.

下面是我使用的代码。

<template>
  <div id="postbox">
    <div class="thumbnail-img" v-bind:style="{ backgroundImage: 'url(' + postItem.img + ')'}"></div>
    <div>
        <h4>{{postItem.title}}</h4>
        <p>{{ cutDescript }}</p>
        <div class="text-date">{{postItem.date}}</div>
        <hr>
        <div class="footer">
            <img class="profile-img" :src="postItem.profileImg"/>
            <span class="writer">by <span class="bold">{{postItem.writer}}</span></span>
            <b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
                    :variant="currentMode == 'grid' ? 'danger' : ''"
                    v-on:click="greet('grid')"
            />
            <span class="good_num">{{postItem.good}}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'postbox',
  props: {
      post: {
          type: Object,
          default: function () {
              return {
                  title: 'Undefined',
                  descript: 'This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.',
                  date: '----년 --월 --일',
                  profileImg: '../assets/logo.png',
                  writer: 'unknown',
                  good: 0,
                  img: '../assets/logo.png'
              }
          }
      }
  },
  data () {
    return {
        postItem: this.post,
        currentMode: this.mode
    }
  },
  computed: {
      cutDescript: function () {
          if (this.postItem && this.postItem.descript && this.postItem.descript.length >= 200) {
              return `${this.postItem.descript.slice(0, 197)}...`
          } else if (this.postItem && !this.postItem.descript) {
              return '본문이 비어있습니다.'
          }
          return this.postItem.descript
      }
  },
  methods: {
       greet: function (mode) {
           if (mode !== 'grid' && mode !== 'map') {
                mode = 'grid'
            }
            this.currentMode = mode
            this.$emit('current-mode', this.currentMode)
       }
  }
}
</script>

这是更改双色的代码。

<b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
    :variant="currentMode == 'grid' ? 'danger' : ''"
    v-on:click="greet('grid')"
/>

methods: {
       greet: function (mode) {
           if (mode !== 'grid' && mode !== 'map') {
                mode = 'grid'
            }
            this.currentMode = mode
            this.$emit('current-mode', this.currentMode)
       }
}

默认设置为灰色。

红色是'danger'.

如果你去下面的地址，你会发现更多关于我在说什么的信息。

https://bootstrap-vue.org/docs/reference/color-variants

:variant="currentMode == 'grid' ? 'danger' : ''"

第一个代码的部分改变了颜色。

单击时会发生变化，我会从函数中获得网格。

网格时，颜色变为红色。

所以我认为可以通过条件语句return从红色到灰色

但是没有达到我想要的效果请问有什么好的方法吗？

Answer 1

你试过这个吗？

:variant="currentMode == 'grid' ? 'danger' : 'gray'"

或者

v-bind:style="[currentMode == 'grid' ? {'color' : 'danger'} : {'color' : 'gray'}]"

编辑
好的，如果模式不是网格或地图，那么在您的函数中，您说好的，它是网格并将当前模式设置为网格。
但你永远不会改变模式来映射。我对吗？
您可以像这样更改这行代码：

<b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
                    :variant="currentMode == 'grid' ? 'danger' : ''"
                    v-on:click="greet((currentMode == 'gird' ? 'map' : 'grid'))"
            />

Answer 2

您可以尝试使用 :style="currentMode == 'grid' ? 'color:red;' : 'color:blue'" 而不是 :variant，并在方法中尝试

greet: function () {
  this.currentMode === 'grid' ? this.currentMode = '' : this.currentMode = 'grid'
}

Vue.config.productionTip = false
Vue.config.devtools = false
Vue.component('child', {
  template: `
  <div id="postbox">
    <div class="thumbnail-img" v-bind:style="{ backgroundImage: 'url(' + postItem.img + ')'}"></div>
    <div>
      <h4>{{postItem.title}}</h4>
      <p>{{ cutDescript }}</p>
      <div class="text-date">{{postItem.date}}</div>
      <hr>
      <div class="footer">
        <img class="profile-img" :src="postItem.profileImg"/>
        <span class="writer">by <span class="bold">{{postItem.writer}}</span></span>
        <b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
           :style="currentMode == 'grid' ? 'color:red;' : 'color:blue'"
           v-on:click="greet()"
        />
        <span class="good_num">{{postItem.good}}</span>
      </div>
    </div>
  </div>
  `,
  props: {
    post: {
      type: Object,
      default: function () {
        return {
          title: 'Undefined',
          descript: 'This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.',
          date: '----년 --월 --일',
          profileImg: '../assets/logo.png',
          writer: 'unknown',
          good: 0,
          img: '../assets/logo.png'
        }
      }
    },
    mode: {type: String, default:''}
  },
  data () {
    return {
      postItem: this.post,
      currentMode: this.mode
    }
  },
  computed: {
    cutDescript: function () {
      if (this.postItem && this.postItem.descript && this.postItem.descript.length >= 200) {
        return `${this.postItem.descript.slice(0, 197)}...`
      } else if (this.postItem && !this.postItem.descript) {
        return '본문이 비어있습니다.'
      }
      return this.postItem.descript
    }
  },
  methods: {
   greet: function () {
     this.currentMode === 'grid' ? this.currentMode = '' : this.currentMode = 'grid'
     /*if (mode !== 'grid' && mode !== 'map') {
       mode = 'grid '
     }
     this.currentMode = 'grid'
     this.$emit('current-mode', this.currentMode)*/
   }
  }
})

new Vue({
  el: '#demo',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js" integrity="sha512-Z0dNfC81uEXC2iTTXtE0rM18I3ATkwn1m8Lxe0onw/uPEEkCmVZd+H8GTeYGkAZv50yvoSR5N3hoy/Do2hNSkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" integrity="sha512-YnP4Ql71idaMB+/ZG38+1adSSQotdqvixQ+dQg8x/IFA4heIj6i0BC31W5T5QUdK1Uuwa01YdqdcT42q+RldAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue-icons.min.css" integrity="sha512-i0tPmtwhNYyKmqYiccSN9qsEX25FsNNkeWqIbjYyk7QoVkPLfyl7QsABy3oIQx5ofROjV6KLJTzV+asMrT25UA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue-icons.min.js" integrity="sha512-5czZ3eLMCVT2wJXRhx0yLN2TZzA2iuncwX2s3P1MTv3X8GHxfKRtcoaTkzEzM0g38iXyuYlES8kbfXNYe7zeTA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <child />
</div>

像 Twitter 一样，我想在每次点击时更改点赞图标的颜色

Like Twitter, I want to change the color of the like icon on every click

html

javascript

vue.js

vuejs2