写一个去除input框空格的vue指令

使用方法使用方法

源码

const handleBlurEvent = (e) => {
    e.target.value = e.target.value.trim();
    
	// 触发原生input事件
    let event = document.createEvent('HTMLEvents');
    event.initEvent('input', true, true);
    e.target.dispatchEvent(event);
};

const bindInputBlurEvent = (node) => {
    if (node.tagName === 'INPUT') {
        node.onblur = handleBlurEvent;
    } else {
    	// 递归子节点
        Array.from(node.children).forEach((children) => {
            bindInputBlurEvent(children);
        });
    }
};

export default {
    bind(el) {
        bindInputBlurEvent(el);
    }
};

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想根据每个字符来筛选数据,你可以使用watch属性来监听输入中的值的变化,然后根据每个字符来进行筛选。 下面是一个示例代码: ``` <template> <div> <input type="text" v-model="searchText" /> <ul> <li v-for="item in filteredData">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { data: [], // 从后端获取的数据 searchText: '', // 用户输入的字符 filteredData: [], // 筛选后的数据 }; }, watch: { searchText(val) { // 将输入的字符按照空格分割成数组 const keywords = val.trim().split(' '); // 筛选数据 this.filteredData = this.data.filter((item) => { for (let keyword of keywords) { if (keyword && item.includes(keyword)) { return true; } } return false; }); }, }, created() { // 从后端获取数据,赋值给data属性 // ... }, }; </script> ``` 在上面的代码中,我们定义了一个data属性来存储从后端获取的数据,以及一个searchText属性来存储用户输入的字符,还定义了一个filteredData属性来存储筛选后的数据。然后,我们使用watch属性来监听searchText的变化,当输入中的值发生变化时,我们将其按照空格分割成数组,然后遍历这个数组,根据每个关键字来筛选数据,并将筛选后的数据赋值给filteredData属性。 最后,在模板中我们使用v-for指令来遍历筛选后的数据,并将它们渲染到页面中。 这样,你就可以根据每个字符来筛选从后端获取的数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值