如何更改点赞按钮的颜色?

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>

如何使按钮在灰色和红色之间切换?

Answer 1

在这种情况下，您应该使用布尔数据，以切换按钮状态之间的红色和灰色

<b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
:variant="isLiked ? 'danger' : ''"
@click="isLiked = !isLiked"
/>
data () {
return {
isLiked: false
}
}