Vue 截取字符串与input 自动获取焦点！

Vue input 框 删除输入内容 自动获取焦点

<template>
    <input ref='id' v-model="msg"  id="searchMT" placeholder="输入汉字搜索..." >
    <div @click="deleteci">删除</div>        
</template>

export default {
    data() {
            return {
                msg:'',
                }
           },
     methods: {
		deleteci(){
                let name= $('#searchMT').val()
                let strs=name.replace(/(^\s+)|bai(\s+$)/g, "");//去除前后的du空格
                var strng = strs.substr(0,strs.length-1)
                //console.log(strng);
                this.msg = strng;
                this.changfouce(); 
            },
            //自动获取焦点
            changfouce(){
                this.$nextTick((x)=>{   //正确写法
                this.$refs.id.focus();
                })
            }
		},
		 created(){
             //自动获取焦点
            this.changfouce();
        },   
}      

这是进入页面input自动获取焦点，手动点击删除input里面的内容，因为在删除的时候焦点会失去所以在删除的函数里面重新调用一下获取焦点的函数就可以实现手动点击删除而失去焦点！配合上vue的v-model来给内容框重新赋值。就可以实现实时改变内容。