用户登录

在 input,textarea,或者 select 这些表单元素上,可以绑定元素的 input 事件,元素的值发生变化的时候就会触发这个事件,你可以绑定这个事件,然后设置一下在这种事件发生的时候要做的事情。

现在这个组件里有个文本框元素,在上面绑定一个 input 事件,用简单的写法就是一个 @ 符号,后面加上事件的名字,这里就是 input 。

后面可以设置一下这个事件的处理器,如果是简单的操作,你也可以直接写在这里,比如修改组件里的某个数据的值。这里我们设置一个事件处理器,名字可以随便定义,比如 onInputContent,事件处理器就是组件里的一个方法的名字。

下面要在这个组件里定义这个方法,先在组件里添加一个 methods 属性,它是一个对象,对象里的东西就是在这个组件里可以使用的一些方法。添加一个 onInputContent。组件接收一个 event 参数,这个参数的值就是事件对象,在这个对象里你可以找到一些有用的数据。先简单的在控制台上输出 event 参数的值。

回到浏览器预览一下,在这个文本框里输入点东西,文本框里的值发生变化的时候就会触发文本框元素的 input 事件,我们在这个元素上绑定了这个事件,设置了事件的处理器,这个处理器做的事情就是把事件对象输出到控制台上。

在这些事件对象里,你可以找到一些有用的数据,比如这个 data 属性的值就是文本框里发生变化的这个值。另外在 target 这个属性里面,你可以找到当前表单元素的值,target 里面有很多东西,这里要找到 value 这个属性,这个属性的值,就是元素当前的值。

input 事件:元素值变化时发生的事件《 Vue.js 前端应用 #3:表单元素 》

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点