设置4个div盒子中被选中的盒子添加背景色

// 给第一个盒子添加样式
<div class="box1 choose" @click="choose(1)">
    <p class="text1">支付件数</p>
    <p class="text2">123</p>   
</div>
// 其他盒子都设置无样式
<div class="box1 notchoose" @click="choose(2)">
    <p class="text1">支付金额(元)</p>
    <p class="text2">356.00</p>
</div>
<div class="box1 notchoose" @click="choose(3)">
    <p class="text1">成功退款笔数</p>
    <p class="text2">123</p>
</div>
<div class="box1 notchoose" @click="choose(4)">
    <p class="text1">成功退款金额(元)</p>
    <p class="text2">245.00</p>
</div>
//方法实现，通过传递过来的参数进行判断点击的是哪个div
choose(e) {
    // console.log("点击box1", e);
    var divs = document.getElementsByClassName("box1");
    e--;
    for (var i = 0; i < divs.length; i++) {
        // 被点击的div只需判断是不是没有样式即可
        if (i == e) {		
            if (divs[i].classList.contains("notchoose")) {
                divs[i].classList.replace("notchoose", "choose");
            }				
        } else {
            // 未被点击的div只需判断是不是有样式即可
            if (divs[i].classList.contains("choose")) {
                divs[i].classList.replace("choose", "notchoose");
            }
        }
    }
},
//样式
.choose {
	background-color: #f1f9fc;
	border: 1px solid #73c0de;
}
.notchoose {
	background-color: white;
	border: 1px solid #999999;
}

实现效果：