我正在制作一個類似Twitter喜歡的按鈕的東西。
我想更改圖示按鈕的顏色。
當點擊按鈕時，從灰色變為紅色是成功的。
但我不知道如何將它從紅色變為灰色。
但我不知道如何將它從紅色改為灰色。
我使用的是javascript和vue.
。下面是我使用的代碼。
<template>
<div id="postbox"/span>>
<div class="thumbnail-img" v-bind:style="{ backgroundImage: 'url(' postItem.img ')'}"></div>
<div>/span>
<h4>{{postItem.title}}</h4>
<p>{{ cutDescript }}</p>
<div class="text-date"> {{postItem. date}}</div>{postItem.
<hr>/span>
<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' ? '危險'：''"
v-on:click="greet('grid') "
/>
<span class="good_num"> {{postItem. good}}</span>{postItem.
</div>/span>
</div>/span>
</div>/span>
</template>
<script>
出口默認 {
名稱。'postbox',
props: {
post: {
型別。物件。
默認：函式（） {
return {
標題。'未定義'。
描述。'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.'。
日期。'----? --?-?'。
profileImg。'./assets/logo.png'。
作家。'unknown'。
好的。0。
img: '.../assets/logo.png'.
}
}
}
},
data ( ) {
return {
postItem。this.post。
currentMode: this.mode
}
},
計算的。{
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.
}
},
方法: {
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"/span> class="gap_margin_5px_horizontal""currentMode == 'grid'? '危險' : ''"
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 第一個代碼的部分改變了顏色。 當我點擊時，就會改變，我從函式中得到一個網格。 當網格時，就會改變。
當網格時，顏色變為紅色。 所以我認為可以通過使用條件陳述句從紅色回傳到灰色。
但它并不像我想的那樣作業，有什么好辦法嗎？
uj5u.com熱心網友回復： 你試過這個嗎？ uj5u.com熱心網友回復： 你可以嘗試用
標籤：:variant="currentMode == 'grid'? 'danger' : ''"
:variant="currentMode == 'grid' ? 'danger' : 'gray'"
:style="currentMode == 'grid' ? 'color:red;' : 'color:blue'"代替:variant :Vue。 config.productionTip = false.
Vue.config.devtools = false
Vue.component('child' , {
template: 'child'.
<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('grid')"
/>
<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.',
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 (mode) {
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>/span>
<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="styleheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min。 css" integrity="sha512- YnP4Ql71idaMB /ZG38 1adSSQotdqvixQ dQg8x/IFA4heIj6i0BC31W5T5QUdK1Uuwa01YdqdcT42q RldAg=="/span> 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=="/span> crossorigin="anonymous" referrerpolicy="no-referrer"> </script>>
<div id="demo">/span>
<child />
</div>/span>