oninput vue 中的用法

最新推荐文章于 2024-09-05 11:20:40 发布

原创最新推荐文章于 2024-09-05 11:20:40 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一种使用Vue.js实现的输入框组件，该组件可以限制用户输入的手机号长度，并通过事件监听来记录购买金额的输入过程。具体包括两种输入框的实现方式：一种用于限制手机号输入长度，另一种用于金额输入并附带事件处理。

第一种

 <div class="inputStyle">
   <input
     oninput="if(value.length>11)value=value.slice(0,11)"
     v-model="codeParams.mobile"
     placeholder="请输入手机号"
     type="number"
   />
 </div>

第二种

 <div class="content-item">
   <div class="label">购买金额:</div>
   <input
     type="number"
     v-model="params.amount"
     v-on:input="ipsEvent"
     placeholder="请输入提质金额,单位元"
   />
 </div>



<script>
  ipsEvent(e) {
    console.log(e, "我是输入");
  }
</script>