VueJS - 如何在单击时突出显示所选按钮

Question

我有 3 个按钮，分别在单击时显示图表。以下是按钮示例：

只要单击按钮，就会显示相应的图表，但我想在显示图表时让按钮以红色突出显示。

<vs-button color="warning" @click="chartClick($event, 'chart1')" vs-value="chart1" v-model="show"> chart1</vs-button>

<vs-button color="warning" @click="chartClick($event, 'chart2')" vs-value="chart2" v-model="show"> chart2 </vs-button>

<vs-button color="warning" @click="chartClick($event, 'chart3')" vs-value="chart3" v-model="show"> chart3 </vs-button>

<script>
data () {
  return {
    show = false
  }
},
mounted (){
  chartClick (chart1)
},
methods: {
  chartClick (event, id){
    
    ...
    this.show = true
  }
}
</script>

请帮助我，我想知道如何在显示图表时突出显示按钮。

我还想知道如何在页面最初加载或运行时突出显示带有按钮 1 (chart1) 的 chart1。

Answer 1

您可以通过在数据部分再添加一个变量来做到这一点，例如：

data () {
  return {
    show : false,
    activeChart : '',
  }
}

你不应该使用 variableName = defaultValue，它应该是 variableName : defaultValue。

然后添加到您的按钮：

:class="{activeChartClass: activeChart === 'chart1'}"

注意：您确定 vs-button 标签支持 v-model 吗？

您还必须将其添加到您的 chartClick 方法中：

this.activeChart = id;

最后添加一个 CSS class 来编辑您的活动按钮：

.activeChartClass {
    background-color: red!important;
}

您可以在此处阅读有关 class 和样式绑定的更多信息：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

VueJS - 如何在单击时突出显示所选按钮

VueJS - How to highlight selected button when clicked

button

highlight

vue.js