iview 踩坑v-model value区别

Posted 2023-04-13

参考技术A 本意只在共享项目中才显示搜索按钮；但是发现 v-if 不生效

:value绑定只是v-bind单向的数据绑定，当用户手动切换时，组件内部修改了对应的值，但是呢，data中的值并没有变化； v-model的绑定是双向的，组件内部的值变化了，也会同步到页面的data中。

IView Input禁止输入空格,IView v-model.trim修饰符失效,IView输入框禁止输入空格

Iview 输入框Input组件地址 https://iview.github.io/components/input

IViewUI和elementUI还不一样，vue自带的trim禁止输入空格修饰符竟然在Input 组件中不起作用。

官方也没有自带什么方法 

<!--IView UI里面   trim修饰符还不起作用 坑爹-->
<Input v-model.trim="value" placeholder="请输入..." @input="inputFun" style="width: 300px"></Input>

解决方案

...

methods:{

//封装成自定义指令最好

inputFun(e) {
   //$nextTick必须
   this.$nextTick(() => {
        //正则过滤空格
        this.value = e.replace(/\\s+/g,\'\');
   }) 
}


}


...