不做不知道,一做就懵了。

今天遇到一个需求:如果是文件夹就可以直接修改名字,如果不是文件夹,是一个有后缀名的文件,那么只修改除后缀名之外的部分

修改文件夹:

修改有后缀名的文件:

直接上结果:

方法一:

用一个存储变量来存储有后缀名的前缀,然后进行双向绑定,之后用户改变了input中的值后再把存储变量的值赋值给原来的filename:

用一个存储变量来存储文件的前缀:

进行双向绑定:

数据发生改变后进行传送赋值:

此方法工作量多,还要进行循环,感觉有点麻烦。

方法二:

不用声明一个存储变量,直接绑定前缀,不过不是双向绑定,是手动赋值,原因后面再说:

相比较来说,第二种方法更为简单。

拓展原因

在没有引入elementUI的时候,双向绑定可以这样实现:

valueChange(event)或者valueChange()结果都能打印event对象

 

而引入了elementUI后:

只有changeMessage()这样才会打印出event对象出来

如果添加上形参的话,再改变值就会报错,而且达不到改变值得效果:

总结:

v-model如果引入了方法,那么不会实现数据双向绑定,只有通过手动去修改,双向绑定是没有 任何效果得

在引入了elementUI后不要写形参就可以拿到event对象了

 以上有任何问题可以留言,勿喷。

 

Logo

前往低代码交流专区

更多推荐