在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue中 getElementsByClassName().innerHtml無

vue中 getElementsByClassName().innerHtml無法給元素賦值 跪求大佬!

<!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時顯示數(shù)字英文鍵盤-->
        <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>

clipboard.png
數(shù)據(jù)能出來,就是賦不了值,求大佬指點迷津~多謝~!

回答
編輯回答
避風港

1、你這么操作DOM就不對,換用數(shù)據(jù)驅(qū)動思路
2、getElementsByClassName 返回值是 NodeList 對象,表示指定類名的元素集合

2017年8月23日 09:58
編輯回答
冷溫柔

document.getElementsByClassName("cur")[0];獲取的是數(shù)組,加個0就好。

2017年4月30日 18:59
編輯回答
負我心

如果需要帶標簽的話,請使用v-html,不帶標簽的話直接{{}}

2017年11月11日 15:55
編輯回答
念初

賦值要通過 this.key=value 來賦值。
另外,能用vue解決的就盡量按vue的方式來解決。
不然,為什么不直接使用jQuery.js算了?!

2018年2月20日 12:51