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

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

修改文件夹：

修改有后缀名的文件：

直接上结果：

方法一：

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

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

进行双向绑定：

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

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

方法二：

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

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

拓展原因

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

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

 

而引入了elementUI后：

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

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

总结：

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

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

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