极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<ul class="plate-ul">
<!--点击添加cur类增加白框样式-->
<li class="el-col el-col-3" @click="curId=0" :class="{'cur':curId===0}"></li>
<li class="el-col el-col-3" @click="curId=1" :class="{'cur':curId===1}"></li>
<li class="el-col el-col-3" @click="curId=2" :class="{'cur':curId===2}"></li>
<li class="el-col el-col-3" @click="curId=3" :class="{'cur':curId===3}"></li>
<li class="el-col el-col-3" @click="curId=4" :class="{'cur':curId===4}"></li>
<li class="el-col el-col-3" @click="curId=5" :class="{'cur':curId===5}"></li>
<li class="el-col el-col-3" @click="curId=6" :class="{'cur':curId===6}"></li>
<li class="el-col el-col-3" @click="curId=7" :class="{'cur':curId===7}"><img src="../../assets/img/xny.jpg"></li>
</ul>
</div>
<!--carId为0时显示中文键盘-->
<div class="car-cnKey" v-show="curId===0">
<ul class="car-cn">
<li class="el-col el-col-3" @click="input($event)" v-for="itemcn in itemsCN" >{{itemcn}}</li>
</ul>
</div>
<!--carId不为0时显示数字英文键盘-->
<div class="car-abcKey" v-show="curId!=0">
<ul class=" car-cn no-margin car-num">
<li class="el-col el-col-3" @click="input($event)" v-for="itemnum in itemsNUM" >{{itemnum}}</li>
</ul>
<ul class="car-cn no-margin car-abc">
<li class="el-col el-col-3" @click="input($event)" v-for="itemabc in itemsABC" >{{itemabc}}</li>
<li class="del">删</li>
</ul>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
itemsCN:[
'京','津','沪','渝','冀','晋','辽','吉',
'黑','苏','浙','皖','闽','赣','鲁','豫',
'鄂','湘','粤','琼','川','贵','云','陕',
'甘','青','藏','桂','蒙','宁','新','台'
],
itemsNUM:[
'0','1','2','3','4','5','6','7',
'8','9'
],
itemsABC:[
'A','B','C','D','E','F','G','H',
'J','K','L','M','N','P','Q','R',
'S','T','U','V','W','X','Y','Z',
'港','澳','学','警'
],
curId:0
},
methods: {
//鼠标点击按钮事件
//希望把键盘点击时获取的值传入当前类为cur的dom对象中
input(event){
var value = event.target.innerHTML;
console.log(value);
var ele =document.getElementsByClassName("cur");
ele.innerHTML=value;
}
},
})
</script>
</html>
<style scoped>
body{
color: #fff;
background: #5d6e7f
}
.plate-ul,.car-cn{
padding: 0;
overflow: hidden;
}
.plate-ul li{
width: 11.8%;
height: 70px;
background: #1a62ab;
line-height: 70px;
text-align: center;
font-size: 44px;
border: 1px solid #2f75bd;
padding: 0;
overflow: hidden;
float: left;
display: inline-block;
margin-right: 0.5%;
}
.plate-ul li:last-child{
background: #07a46f
}
.update-btn{
margin-top: 40px;
width: 160px;
height: 50px;
background: #58ba08;
border-radius: 0;
font-size: 22px;
margin-right: 8px
}
.plate-ul li.cur{
border:1px solid #fff;
}
.car-cn li{
width: 11.8%;
height: 60px;
background: #4185cc;
line-height: 60px;
text-align: center;
font-size: 34px;
padding: 0;
overflow: hidden;
float: left;
display: inline-block;
margin-right: 0.7%;
margin-bottom: 0.7%;
}
.updateNum-left-big-img{
padding-top: 35px;
padding-right: 30px;
}
.updateNum-left-big-img img{
width: 100%
}
.car-cn li.del{
background: #1d4e82;
}
.plate-ul li.cur{border: 1px solid #fff}
@media (max-width: 768px){
.updateNum-left-big-img{
display: none
}
}
.car-cn li:hover{
background: #1a62ab;
cursor: pointer;
}
.plate-ul li:hover{
border: 1px solid #fff;
}
.update-btn:hover{
background: #64ce0e;
}
.no-margin {
padding: 0!important;
margin:0!important;
}
</style>
数据能出来，就是赋不了值，求大佬指点迷津~多谢~！
document.getElementsByClassName("cur")[0];获取的是数组，加个0就好。