这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战
前言
在前端开发过程中，会用到各种各样的基础组件，一些常用的组件的使用方法一定要滚熟于心，对于刚入门的新手来说，对基础知识的熟练掌握很重要，如果不熟练就会影响开发速度。那么本篇博文就来分享一个比较基础的知识点，在使用Vue开发的时候，使用input组件的时候，获取input输入框的值的方法，方便使用查阅。
在input使用过程中，一般常用的获取输入框的值的方法有三种：第一种是通过v-model双向绑定的方式来实现想要获取的input输入框的值，第二种是通过使用ref来获取输入框的值，第三种是通过监听输入框的变化来获取input的值。具体的使用方法如下所示：
方法一：通过v-model双向绑定的方式来实现想要获取的input输入框的值。
<template>
<div>
<div class=" light-group ">
<a-input v-model="groupName" placeholder="请输入分组名称" class="group-name-input" />
</div>
</div>
</template>
<script>
export default {
data() {
return{
groupName: ''
}
},
methods: {
async addGroup () {
const opt = Object.assign({ projectId: 1, groupName: this.groupName })
this.setData(opt, addGroup)
}
} ,
}
</script>
复制代码方法二：通过使用ref来获取输入框的值。
<template>
<div>
<div class=" light-group ">
<a-input ref="groupName" placeholder="请输入分组名称" class="group-name-input" />
</div>
</div>
<script>
export default {
methods: {
async addGroup () {
const opt = Object.assign({ projectId: 1, groupName: this. **$refs.** groupName.value })
this.setData(opt, addGroup)
}
} ,
}
</script>
</template>
复制代码方法三：通过监听输入框的变化来获取input的值。
<template>
<div>
<div class=" light-group ">
<a-input class="group-name-input" placeholder="请输入分组名称" @keyup.enter="addGroup" @input=“addGroup($event)"/>
</div>
</div>
<script>
export default {
methods: {
async addGroup (event) {
const opt = Object.assign({ projectId: 1, groupName: event.currentTarget.value })
this.setData(opt, addGroup)
}
} ,
}
</script>
</template>
复制代码最后
以上就是关于在前端开发Vue中获取input输入框值的方法，尤其是对于刚接触前端开发者来说也是必备技能，方便以后查阅使用，这里不再赘述。欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！