用el-input做了个保留小数点后两位的功能,代码如下:
input_amount(){
//保留小数点后两位
let index=this.formData.confirm_amount.indexOf(".");
if(index>=0){
if(this.formData.confirm_amount.length>((index+1)+2)){
let subStr=this.formData.confirm_amount.substring(0,((index+1)+2));
console.log("截取字符串:",subStr,typeof subStr);
this.$nextTick(()=>{
this.formData.confirm_amount=subStr;
});
console.log("保留小数点后两位:",this.formData.confirm_amount);
}
}
},
input_amount是change事件触发的,formData.confirm_amount是v-model绑定的值,一开始我是直接给v-model赋值的:this.formData.confirm_amount=subStr;
,然后就发现DOM没更新,这让我百思不得其解,而后我在百度了之后看到一个说法是要放在nextTick内: this.$nextTick(()=>{this.formData.confirm_amount=subStr;});
,试了一下DOM果然更新了,但是这让我更迷惑了,因为按照Vue官文档的说法,nextTick是DOM更新后才调用的,而我本来的意图是通过修改v-model的值触发DOM更新,但现在实际情况确是反过来了,而且我又试了一下直接给v-model赋一个确定值:this.formData.confirm_amount="111"
,发现DOM也更新了。。。这下我是彻底蒙蔽了,求大神帮我一把。。。
貌似是因为
el-input
组件的问题,它的change
事件是用emit调用你自己定义的change事件并回传value值,实际上是将数据更新推入到了异步更新队列中。如果使用原生的input就不会出现这种问题。
ps:不确定是否这个原因