當我們需要獲取表單中的數據時,通常情況下我們會使用JavaScript的DOM操作來獲取對應的值。但在Vue中,我們可以更加方便地通過Vue的屬性綁定和響應式數據來實現表單數據的獲取與存儲。
在Vue中獲得表單內容的方法非常簡單,我們只需要在數據中定義對應的屬性,然后通過v-model指令將表單元素與該屬性進行綁定即可。我們可以在組件中定義data函數,并返回一個對象作為組件的數據源。在這個對象中,我們可以定義Vue實例中所使用的所有數據和狀態,如下例所示:
data: function () { return { username: '', password: '' } }
在上面的代碼中,我們定義了一個包含了兩個屬性(username和password)的對象作為data函數的返回值,這兩個屬性都是空字符串。
接著我們可以在視圖中使用v-model指令將表單元素與這些屬性進行綁定:
<input v-model="username" type="text" name="username"> <input v-model="password" type="password" name="password">
如上所示,我們可以直接給表單元素添加v-model屬性,并將其值設置為我們定義在data函數中的屬性名即可。在用戶輸入表單時,Vue會將數據同步到組件實例中對應的數據屬性中。
當然,如果我們需要獲取表單數據,我們可以在組件中定義一個方法,然后調用它來獲取對應的值。在下面的例子中,我們通過button標簽綁定點擊事件方法getName,然后在方法中通過this關鍵字來獲取對應的數據:
<template> <div> <form> <label>用戶名:</label> <input v-model="username" type="text" name="username"> <br/><br/> <label>密碼:</label> <input v-model="password" type="password" name="password"> <br/><br/> <button v-on:click="getName">獲取用戶名</button> </form> </div> </template> <script> export default { name: 'FormDemo', data: function () { return { username: '', password: '' } }, methods: { getName () { console.log(this.username) } } } </script>
如上所示,我們通過v-on指令和click事件來綁定方法getName。當用戶點擊button標簽時,Vue會自動調用該方法,同時this.username就可以獲取到input中輸入的對應的值了。
總的來說,Vue獲得表單內容非常簡單,只需要通過v-model將表單元素與Vue組件中的數據屬性綁定即可。同時,我們還可以在Vue組件中定義對應的方法來獲取表單數據。這種方式可以讓我們避免手動操作DOM從而提高代碼的可維護性。