美文网首页Vue.js专区Vue.js1024
22.Vue 监听input事件,并获取值

22.Vue 监听input事件,并获取值

作者: 圆梦人生 | 来源:发表于2018-05-16 18:48 被阅读50次

在Vue中通过监听js的oninput事件,并获取输入的值,参考案例:

案例:

<template>
  <div>
      下面是一个输入框,监听了oninput事件:<br/>
      <input type="text" @input="inputFun" /> <br/><br/>
      输入的值是:{{inputValue}}
  </div>
</template>
<script>
export default {
  data(){
    return {
      inputValue: ''
    }
  },
  methods: {
    inputFun(e){
      //e.target 指向了dom元素
      this.inputValue = e.target.value;
      // ...
    }
  }
}
</script>

相关文章

网友评论

  • 张宪宇:v-model 也可以监听 这样不是更方便嘛
    圆梦人生:这里只是做个案例,主要是说明input事件的使用。v-model 内部也是对input事件做了监听,某些情况是需要根据用户输入值的情况 进行特殊处理的,v-model 处理可能就不太好使了。
  • 使用默认值:请问楼主有没有遇到过使用cli生成的单页应用在ie浏览器打开后卡顿不流畅的情况

本文标题:22.Vue 监听input事件,并获取值

本文链接:https://www.haomeiwen.com/subject/npdmdftx.html