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 來獲取值
代碼運行效果如下：當表單中輸入 張曉菲，點擊按鈕，獲取到值，輸出在控制台

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