【vue】三种获取input值的写法
16lz
2021-04-07
一、v-model 表单输入绑定
使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
<template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账号"> <input class="login-input" type="password" v-model="password" placeholder="请输入密码"> <div class="login-button" @click="login" type="submit">登陆</div> </div></template><script>export default { name: 'Login', data() { return { username: '', password: '' } }, methods: { login() { console.log(this.username) console.log(this.password) } }}<script/>二、@input 监听输入框
输入框只要输入的值变化了就会触发 input 调用 search 数据实时获取通过 event.currentTarget.value 获取到
<template> <div class="class"> <div> <input type="text" @keyup.enter="search" @input="search($event)"/> </div> </div></template><script> export default { name: "search", data() { }, methods: { search(event){ console.log(event.currentTarget.value) } } }</script>三、ref 获取数据
这种方式类似于原生DOM,但是ref获取数据更方便
<template> <div class="class"> <input type="text" ref="getValue" /> <button @click="subbmitButton">获取表单数据</button> </div></template><script> export default { name: "page", data() { }, methods: { subbmitButton(){ console.log(this.$refs.getValue.value) } } }</script>©著作权归作者所有：来自51CTO博客作者wx605879fdc8dae的原创作品，如需转载，请注明出处，否则将追究法律责任
更多相关文章
- 可实现聊天行为审计的数据防泄漏软件
- 【vue】v-for倒序显示/JSON数据倒序
- 云计算入门从零到一成为云计算/运维工程师——如何部署自己的论
- 在期数较短的微观面板数据中使用双重差分法(DID)有没有问题呢?
- 数据分析之Pandas合并操作总结
- 基于数据智能的区域教育大平台建设与应用实践
- 《大数据》2020年第6期目次&摘要
- 教育大数据隐私保护机制与技术研究
- Linux相关网络基础详解——OSI&TCP/IP&数据解封及封装