【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法（持续更新中...）
一、通过event获取console.log(event.target); // 当前元素点击的子节点console.log(event.currentTarget);// 当前Vue元素var pro = event.currentTarget;// 当前元素pro.lastElementChild.style.color = "#DE3E3E"; /
·
一、通过event获取
console.log(event.target); // 当前元素点击的子节点
console.log(event.currentTarget); // 当前Vue元素
var pro = event.currentTarget; // 当前元素
pro.lastElementChild.style.color = "#DE3E3E"; // 修改最后一个子节点，改变图标和文字颜色
console.log(pro.getAttribute('name')); // 获取html元素属性值
二、如果click事件传参数，需要设置$event来获取。
<div class="bar_menu" v-on:click="showInfo(1,$event)" name="1"></div>
<script type="text/javascript">
var bottom_bar = new Vue({
el: '#bottom_bar',
data: {
img_1: "images/bar_1_select"
},
methods: {
showInfo(s,event) {
// console.log(event.target); // 当前元素
console.log(event.currentTarget); // vue元素
var pro = event.currentTarget; // 当前元素
pro.lastElementChild.style.color = "#DE3E3E";
}
}
})
</script>三、vue动态修改class=的三种方法
<!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;
/* color:white; */
}
.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_green {
float: left;
height: 80px;
width: 80px;
background-color: rgb(4, 112, 49);
margin-left: 20px;
line-height: 70px;
text-align: center;
border-radius: 10px;
border: 1px rgb(212, 211, 211) solid;
color:white;
/* font-size: 20px; */
}
.box_black {
float: left;
height: 80px;
width: 80px;
background-color: rgb(0, 0, 0);
margin-left: 20px;
line-height: 70px;
text-align: center;
border-radius: 10px;
border: 1px rgb(248, 2, 2) solid;
color:white;
}
.box_red {
float: left;
height: 80px;
width: 80px;
background-color: rgb(251, 0, 0);
margin-left: 20px;
line-height: 70px;
text-align: center;
border-radius: 10px;
border: 1px rgb(248, 2, 2) solid;
color:white;
}
button {
margin-top: 30px;
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">
<!-- 第1种方式-更改【class名称】的【字符串】写法，改变量，改样式 -->
<div class="box" :class="class_1">10元</div>
<!-- 第2种方式 - 【数组】的形式替换,绑定的class个数不确定，名称也不确定 -->
<div class="box" :class="classArr">20元</div>
<!-- 第3种方式 - 【两种样式】切换方式修改 -->
<div class="box" :class="classObj">30元</div>
<div>
<button @click="hand">点击改变</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var root = new Vue({
el: '#root',
data: {
class_1:"box",
classArr:["","box_green",""],
classObj:{
box_black:false,
box_red:true,
}
},
methods: {
hand() {
// 修改第1个DIV - 10元样式
this.class_1="box_green";
// this.classArr=this.classArr[0];
// 修改第2个DIV样式,让其中一个数组有样式内容
Vue.set(root.classArr,0,"");
Vue.set(root.classArr,1,"");
Vue.set(root.classArr,2,"box_black");
// 修改第3个DIV样式
this.classObj.box_black=true;
this.classObj.box_red=false;
}
}
})
</script>
</body>
</html>四、vue动态修改style=“”的三种方法
<!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-top: 30px;
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">
<!-- 第1种方式-属性【参数】的形式值修改 -->
<div class="box" :style="{color: m_color,fontSize: fsize+'px'}">{{m_value}}元</div>
<!-- 第2种方式 - 整个属性【字符串】的形式替换方式修改 -->
<div class="box" :style="s_color">{{m_value}}元</div>
<!-- 第3种方式 - 【标准格式组】方式修改 -->
<div class="box" :style="styleObj">{{m_value}}元</div>
<!-- <div class="box" :style="{fontSize: fsize+'px'}">{{m_value}}元</div> -->
<div>
<button @click="hand">点击获取到充值金额</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var root = new Vue({
el: '#root',
data: {
number: ["10", "20", "50"],
m_value: 30,
fsize: 20,
m_color: "red",
s_color: "color: green;fontSize:20px",
styleObj: {
fontSize: '25px',
color: 'orange',
backgroundColor: 'black'
}
},
methods: {
hand() {
// 修改第1个DIV样式
this.fsize=30;
this.m_color="black";
// 修改第2个DIV样式
this.s_color="color:orange;fontSize:25px",
// 修改第3个DIV样式
this.styleObj = {
fontSize: '20px',
color: 'white',
backgroundColor: 'red'
}
// alert(this.s_color);
}
}
})
</script>
</body>
</html>五、通过动态修改Class样式（style）名称实现计算器或充值等功能
<!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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献11条内容
所有评论(0)