在实际开发中,我们经常需要获取表单中输入的内容,比如注册,登录等等
vue 中可以使用$refs获取表单内容,也可以使用v-model双向绑定数据来获取
一、使用$refs获取表单内容
<template>
<div>
<input type="text" ref="name">
<button @click="getInputValue">获取表单内容</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
getInputValue(){
var n=this.$refs.name.value;
console.log(n)
}
}
}
</script>
代码解读:
我们在需要取值的标签中定义一个参数名称赋值给ref ref="name"
,然后在调用方法的时候可以使用this.$refs.name.value
来获取值
代码运行效果如下:当表单中输入 张晓菲,点击按钮,获取到值,输出在控制台
二、使用v-model双向绑定
代码如下:
<template>
<div>
<input type="text" v-model="name">
<button @click="getInputValue">获取表单内容</button>
</div>
</template>
<script>
export default {
data(){
return{
name:""
}
},
methods:{
getInputValue(){
console.log(this.name)
}
}
}
</script>
解读:
1、在data中定义一个参数 name
2、使用v-model 绑定 name
3、点击按钮执行 getInput 方法,使用 this.name 获取定义的name