Vue可以輕松地獲取表單輸入數據。我們可以使用v-model指令來將表單輸入與Vue數據進行雙向綁定。這意味著在表單輸入發生更改時,相應的Vue數據值也會隨之更新。
<!-- 表單元素綁定 --> <input v-model="message" type="text"> <!-- 顯示數據 --> <p>{{message}}</p>
在上面的代碼中,表單元素綁定到Vue實例的message數據。輸入到input元素的任何值都將立即更新該數據。這個值也可以通過{{message}}插值綁定綁定到DOM中的其他元素中。這樣,每次表單數據發生更改時,屏幕上的數據會隨之更新。
除了單個表單元素,我們還可以使用v-model指令來綁定復選框,單選按鈕和選擇框等表單元素。對于選擇框,Vue使用v-model指令來將選定的選項的值綁定到Vue數據。
<!-- 綁定多個checkbox --> <input type="checkbox" id="apple" value="apple" v-model="checkedFruits"> <label for="apple">Apple</label> <input type="checkbox" id="orange" value="orange" v-model="checkedFruits"> <label for="orange">Orange</label> <input type="checkbox" id="banana" value="banana" v-model="checkedFruits"> <label for="banana">Banana</label> <!-- 顯示選擇的項 --> <p>Selected Fruits: {{checkedFruits}}</p>
在上面的代碼中,我們綁定了三個復選框到Vue實例的checkedFruits數據。每次選中或取消選中一個選項時,該值都會更新。由于checkedFruits是一個數組,因此可以通過插值綁定將其值顯示在屏幕上。
總之,Vue提供了一種便捷的方式來將表單輸入數據綁定到Vue數據。這種雙向綁定可以大大簡化表單數據處理,并使代碼更加簡潔易讀。無論您的應用程序需要獲取單個表單元素還是多個表單元素,Vue都提供了一種簡單而優美的解決方案。
上一篇vue獲取表單輸入信息