像 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)
       }
}

灰色是默认设置。

红色是“危险”。

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

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

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

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

当我点击时会发生变化，我从函数中得到一个网格。

网格时，颜色变为红色。

所以我认为使用条件语句可以从红色返回灰色。

但它并没有按我的意愿工作有什么好的方法吗？

Answer 1

您可以尝试使用: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>

Answer 2

你试过了吗？

: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'))"
            />