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 更新循环之后执行。在修改数据之后立即使用它,然后等待