vue 使用$refs获取表单内容及v-model双向数据绑定

在实际开发中，我们经常需要获取表单中输入的内容，比如注册，登录等等vue 中可以使用$refs获取表单内容，也可以使用v-model双向绑定数据来获取一、使用$refs获取表单内容templatedivinput type=text ref...

在实际开发中，我们经常需要获取表单中输入的内容，比如注册，登录等等

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