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

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

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 来获取值
代码运行效果如下:当表单中输入 张晓菲,点击按钮,获取到值,输出在控制台
vue 使用$refs获取表单内容及v-model双向数据绑定

二、使用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

上一篇:vue中ref的用法


下一篇:vue 上传组件 选择文件之前有校验 ,校验通过弹出文件选择框,否则不弹