vue input输入框聚焦和失焦时内容处理

最新推荐文章于 2024-09-26 17:07:55 发布

原创最新推荐文章于 2024-09-26 17:07:55 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

vue 技巧专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种处理input输入框聚焦与失焦时的特殊逻辑：聚焦时若内容为0则清空，失焦时若内容为空则设为0。通过Vue.js的@focus和@blur事件监听实现。

input输入框聚焦时，如果内容为0，让其置空处理；如果内容为空，在失焦时，让其为0处理；

html:
<input class="input-small-mt"  @focus="focusPrice($event)"  @blur="blurPrice($event)" v-model="i.purchase_price" type="text" />

js:
  //文本聚焦事件 为0 置空处理
  focusPrice:function($even){
     if($even.target.value==='0'||$even.target.value===0){
        $even.target.value='';
     }
  },
        //文本失焦事件 为空置0处理
 blurPrice:function($even){
    if($even.target.value===''){
       $even.target.value=0;
    }
},