In real development, we often need to get input from the form, such as registration, login, and so on

Form content can be retrieved from vUE using $refs or v-Model bidirectional binding data

Get the form content with $refs

<template> <div> <input type="text" ref="name"> <button @click="getInputValue"> <script> export default { data(){ return{ } }, methods:{ getInputValue(){ var n=this.$refs.name.value; console.log(n) } } } </script>Copy the code

We define a parameter name in the label we want to value and assign it to refref="name"Can then be used when calling a methodthis.$refs.name.valueTo get the value of the code running effect is as follows: when the form input Zhang Xiaofei, click the button to get the value, output in the console

Second, use V-Model bidirectional binding

The code is as follows:

<template> <div> <input type="text" v-model="name"> <button @click="getInputValue"> <script> export default { data(){ return{ name:"" } }, methods:{ getInputValue(){ console.log(this.name) } } } </script>Copy the code

Reading:

Name = getInput (); name = this.name; getInput ()