GetElementsByClassName (). InnerHtml in vue cannot assign values to elements. Beg boss!

<!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>
        <!--carId0-->        
        <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>
        <!--carId0-->
        <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: "-sharpapp",
        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: {
            //
            //curdom
            input(event){
                var value = event.target.innerHTML;
                console.log(value);
                var ele =document.getElementsByClassName("cur");
                ele.innerHTML=value;
            } 
        },
       
    })
    </script>
</html>

<style scoped>
        body{
            color: -sharpfff;
            background: -sharp5d6e7f
        }
        .plate-ul,.car-cn{
            padding: 0;
            overflow: hidden;
        }
        
        .plate-ul li{
            width: 11.8%;
            height: 70px;
            background: -sharp1a62ab;
            line-height: 70px;
            text-align: center;
            font-size: 44px;
            border: 1px solid -sharp2f75bd;
            padding: 0;
            overflow: hidden;
            float: left;
            display: inline-block;
            margin-right: 0.5%;
        
        }
        .plate-ul li:last-child{
            background: -sharp07a46f
        }
        .update-btn{
            margin-top: 40px;
            width: 160px;
            height: 50px;
            background: -sharp58ba08;
            border-radius: 0;
            font-size: 22px;
            margin-right: 8px
        }
        .plate-ul li.cur{
            border:1px solid -sharpfff;
        }
        .car-cn li{
            width: 11.8%;
            height: 60px;
            background: -sharp4185cc;
            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: -sharp1d4e82;
        }
        
        .plate-ul li.cur{border: 1px solid -sharpfff}
        
        @media (max-width: 768px){
            .updateNum-left-big-img{
                display: none
            }
            
        }
        
        .car-cn li:hover{
            background: -sharp1a62ab;
            cursor: pointer;
        }
        
        .plate-ul li:hover{
            border: 1px solid -sharpfff;
        
        }
        .update-btn:hover{
            background: -sharp64ce0e;
        }
        
        .no-margin {
            padding: 0!important;
            margin:0!important;
        }
        
        </style>
data can come out, but can not be assigned value, ask the boss for advice ~ thank you ~!