VUE 實現IP輸入框

<style>
        .ipAdress {
            display: flex;
            align-items: center;
            border: 1px solid #0190FE;
            width: 148px;
            margin-right: 10px;
            padding: 0;
        }

        .ipAdress li {
            position: relative;
            height: 23px;
            margin: 0;
            list-style: none;
        }

        ul[class="ipAdress"] input[type="text"] {
            border: none;
            width: 100%;
            height: 23px;
            text-align: center;
            background: transparent;
            color: #000;
        }

        .ipAdress li div {
            position: absolute;
            bottom: 2px;
            right: 0;
            border-radius: 50%;
            background: #0190FE;
            width: 2px;
            height: 2px;
        }

        /*只需要3個div*/
        .ipAdress li:last-child div {
            display: none;
        }

        /*取消掉默認的input focus狀態*/
        .ipAdress input:focus {
            outline: none;
        }

<div id="app">

        <ul class="ipAdress">

            <li v-for="(item,index) in ipAdress">

                <input type="text" @input="checkIpVal(item,index)" @keyup="turnIpPOS(item,index,$event)"

                    v-model:value="item.value" ref="ipInput" @blur="setDefaultVal(item)" />

                <div></div>

            </li>

        </ul>

</div>

//vue實例 data
ipAdress: [{
                    value: ''
                }, {
                    value: ''
                }, {
                    value: ''
                }, {
                    value: ''
                }]
//methods
                checkIpVal(item, index) {
                    let self = this;
                    //確保每個值都處於0-255
                    let val = item.value;
                    //當輸入的是空格時，值賦為空
                    val = val.trim();
                    val = parseInt(val, 10);
                    if (isNaN(val)) {
                        val = ''
                    } else {
                        val = val < 0 ? 0 : val;
                        val = val > 255 ? 255 : val;
                    }
                    item.value = val;
                },
                turnIpPOS(item, index, event) {
                    let self = this;
                    let e = event || window.event;
                    // console.log(index);
                    //刪除鍵把當前數據刪除完畢后會跳轉到前一個input，左一不做任何處理
                    if (e.keyCode == 8) {
                        let val = item.value;
                        console.log(val);
                        if (index == 0) { } else if(val==''){
                            self.$refs.ipInput[index - 1].focus();
                        }
                    }
                    //右箭頭、回車鍵、空格鍵、冒號均向右跳轉，右一不做任何措施
                    if (e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190 || e.keyCode == 110) {
                        if (index == 3) { } else {
                            self.$refs.ipInput[index + 1].focus();
                        }
                    }
                },
                setDefaultVal(item) {
                    //當input失去焦點，而ip沒有賦值時，會自動賦值為0
                    let self = this;
                    let val = item.value;
                    if (val == '') {
                        item.value = '0';
                    }
                },