Vue中獲取input輸入框值的兩種方式

在使用Vue開發中，我們會常常獲取input框的值，在這跟大家總結一下我常用的兩種方式。

1. 使用ref獲取input框的值

<template>
   <div>
       <div class="logininfor">
           <input type="text" placeholder="手機號碼" ref="userphone">
           <input type="text" placeholder="密碼" ref="userpass">
           <span @click="register()">注冊</span>
       </div>
       <p>已有賬號？去<span class="zhuce" @click="login()">登錄</span></p>
   </div>
   <script>

export default {
    methods: {
            register(){
                window.console.log(this.$refs.userphone.value)
                window.console.log(this.$refs.userpass.value)
            }
        },
    }
</script>
</template>

2. 通過v-model雙向綁定，完成input框值獲取。

<template>
   <div>
       <div class="logininfor">
           <input type="text" placeholder="手機號碼" v-model="userphone">
           <input type="text" placeholder="密碼" v-model="userpass">
           <span @click="register()">注冊</span>
       </div>
       <p>已有賬號？去<span class="zhuce" @click="login()">登錄</span></p>
   </div>
</template>
<script>

export default {
     data(){
        return{
            userphone:"",
            userpass:""
        }
    },
    methods: {
            register(){
                window.console.log(this.userphone,this.userpass)
            }
        },
    }
</script>

ok啦！小伙伴們可以去試一試，點贊來一波哦，么么噠