vue项目使用 elementUI input 组件的一些小技巧

1.需求：实时监听 input 长度变化，并显示

html:
<el-input v-model="inputTitle" ref="count" ></el-input>
<span class="max-length">{ {countTitle}}/{ {maxlength}}</span>

 

watch:{

　　　　inputTitle(){
　　　　　　this.$nextTick(() => {
　　　　　　　　this.countTitle = this.$refs.count.value.length <= this.maxlength ? this.$refs.count.value.length : this.maxlength
　　　　　　　　　　})
　　　　　　　　},

}

　　

  没有使用this.$nextTick时，直接监听inout绑定的值，输入一个字符打印this.$refs.count.value.length为0，删除一个字符长度会先加1，然后再减减

原因是提前监听了长度而dom还未渲染，因为Vue中DOM更新是异步的；

官方解释：this.$nextTick将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待