blog14

vuejs 实现按钮点击后切换颜色

在网页交互过程中，我们总需要有一些页面变化来与提醒用户他已经触发了什么东西，但不能总依赖于后台返回给我们的数据再进行变化，所以我们前端可以直接改变页面的样式，来提醒用户即可。

以下是使用vue实现的，点击按钮后相应按钮变黄色，并且默认选中第一个按钮.若不想有默认选中的按钮，只需要将changgeColor的值设置为-1即可。

代码：

<template>
<el-button
    v-for="(item, index) in timeBtnArr" 
    :key="item.name"
    @click="handleTimeBtnClick(item, index)" 
    :class="{isClick:changeTimeColor === index}"
    size="mini"       
    class="btn">
    {{ item.name }}       
</el-button>
</template>

<script>
export default {
     data() {
        return{ 
             changeColor: 0
            }
    methods: {
        handleTimeBtnClick(item, index) {
        this.changeColor = index
            }
</script>

<style>
.isClick {
    background-color: yellow;
}
</style>