Javascript 如何在单击时切换背景色

我有一个Html表，我正在使用

vue.js

创建它，它是动态的JSON数据，我试图做的是单击我想要更改该行的背景颜色

我的代码

newvue({
el:“应用程序”，
数据（）{
返回{
billPendingData：[{
“比尔诺”：“A1”，
“客户名称”：“s”，
“netamount”：“131.0000”，
“billtime”：“16:37:53”
},
{
“比尔诺”：“A3”，
“客户名称”：“Dheeraj”，
“netamount”：“1058.0000”，
“billtime”：“17:35:12”
}
],
};
},
方法：{
}
});
Vue.config.productionTip=false；
Vue.config.devtools=false

账单号
C.姓名
净金额
时间
{{data.billno}
{{data.customername}
{{data.netamount}
{{data.billtime}
以下是解决问题的步骤

首先声明新的数据模型

data() {
    return {
       'active_row':''
    };
}

下一步在tr v中，将其更改为此

<template v-for="(data, index) in billPendingData">
    <tr :class="[(active_row == index ? 'active_row' : '') ,'onHover']" :key="data.billno" @click="rowClick(data, index)">
        <td>{{data.billno}}</td>
        <td class="text-center">{{data.customername }}</td>
        <td class="text-right">{{data. netamount}}</td>
        <td>{{data.billtime}}</td>
      </tr>
</template>

最后一个在您的样式中，您只需像

.active_row {
   background-color:red
}

替换此行：

<tr class="onHover" v-for="data in billPendingData" :key="data.billno" @click="rowClick(data)">

同时将适当的突出显示的css添加到
.active
类中

Upd

将以下代码添加到*.vue文件：

<style>
.active{
  background-color: green;
}
</style>


.主动{
背景颜色：绿色；
}

注：我可能会犯错误，因为我没有在我的服务器上运行它，但你知道怎么做了。
嘿，在Onclil，你正在删除我的方法，我在点击Row时定义了一些方法，我更新了我的答案，我这样写是为了让你的代码更简短。我怎么能使用css样式？
<tr class="onHover" v-for="(data, index) in billPendingData" :key="data.billno" @click="rowClick(data, index)" :class="[{'active': index === activeIndex}]">

data() {
    return {
        activeIndex: null,
...

methods: {
    rowClick(data, index){
        this.activeIndex = index;
    }

}

<style>
.active{
  background-color: green;
}
</style>