友情提示，最全的点击这里：【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法（持续更新中...）_【敦厚的曹操】的专栏-CSDN博客一、通过event获取 console.log(event.target); // 当前元素点击的子节点 console.log(event.currentTarget); // 当前Vue元素 var pro = event.currentTarget; // 当前元素 pro.lastElementChild.style.color = "#DE3E3E";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>
#root {
background-color: rgb(245, 245, 245);
width: 400px;
height: 250px;
padding: 20px 20px 20px 50px;
}
.select {
margin-top: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.box {
float: left;
height: 80px;
width: 80px;
background-color: rgb(255, 255, 255);
margin-left: 20px;
line-height: 70px;
text-align: center;
border-radius: 10px;
border: 1px rgb(212, 211, 211) solid;
font-size: 20px;
}
.box_select {
float: left;
height: 80px;
width: 80px;
background-color: rgb(255, 255, 255);
margin-left: 20px;
line-height: 70px;
text-align: center;
border-radius: 10px;
border: 1px rgb(248, 2, 2) solid;
font-size: 20px;
}
button {
margin-left: 40px;
width: 220px;
height: 60px;
border-radius: 10px;
background-color: rgb(9, 79, 170);
color: antiquewhite;
font-size: 20px;
}
</style>
<body>
<div id="root">
<div class="money">
请输入充值金额：
<input type="text" placeholder="请输入或选择金额：" v-model:value="m_value">
</div>
<div class="select">
<div class="box" :class="m_style[0]" @click="change(0)">{{number[0]}}元</div>
<div class="box" :class="m_style[1]" @click="change(1)">{{number[1]}}元</div>
<div class="box" :class="m_style[2]" @click="change(2)">{{number[2]}}元</div>
</div>
<div>
<button @click="hand">点击获取到充值金额</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var root = new Vue({
el: '#root',
data: {
m_style: ["box", "box", "box"],
number:["10","20","50"],
m_value:0
},
methods: {
change(a) {
// 把所有元素初始化样式为box
for (let i = 0; i < this.m_style.length; i++) {
Vue.set(this.m_style, i, "box");
}
this.m_value=this.number[a];
// 修改当前点击元素为新样式
Vue.set(this.m_style, a, "box_select");
},
hand(){
alert(this.m_value);
}
}
})
</script>
</body>
</html>
