vue的input设置不能输入负数（Vue中@change、@input和@blur的区别以及什么是@keyup）

一    
    
   、@change    


     


     

、@input




 




 




、@blur事件

@change在输入框发生变化且失去焦点后触发；

@input在输入框内容发生变化后触发（在界面加载数据以前）

@blur失去焦点就触发

注意：

@change先于@blur

@input和change的默认参数为输入内容   
    
    
，而blur的默认参数为dom节点   
    
    
。

在搜索下拉框选择数据后


     


     


   ，即刻搜索的案例：

<!-- 下拉搜索框 --> <el-select v-model="listQuery.productId" clearable placeholder="请选择协议号" filterable class="filter-item" @change="handleFilter" //添加@change事件 




 




 

，并调用筛选函数handleFilter() > <el-option v-for="item in productList" :key="item.id" :label="item.productId" :value="item.productId" :title="item.productId" style="width: 200px"> </el-option> </el-select>

二   

   

  、@keyup事件

Vue中的@keyup（键盘事件）是按键松开   

   

   

，当指定的按键松开会触发的事件

     

     

  ，可以监听不同的按键响应


     


     


   。

事件代码 事件描述 @keyup.enter 回车按键松开 @keyup.left 左键按键松开 @keyup.right 右键按键松开 @keyup.up 上键按键松开 @keyup.down 下键按键松开 @keyup.delete 删除按键松开

在输入框输入数据并按下enter键后进行筛选示例如下：

<el-input v-model="listQuery.nameParam" maxlength="30" placeholder="请输入手机号或用户名" style="width: 200px" class="filter-item" clearable @clear="handleFilter" //用户点击清空按钮则调用筛选函数
  




  




  
，返回所有列表 @keyup.enter.native="handleFilter" /> //输入后按enter键则调用筛选函数  


  


  


，返回满足条件的列表

@click：可清空的单选模式下用户点击清空按钮时触发