vue-雙向資料繫結獲取表單form所有值
阿新 • • 發佈：2020-07-22
本文使用vue強大功能之一v-model雙向資料繫結實現一鍵獲取表單所有的值,都存在一個物件裡面，使用JSON.stringify轉換後直接得到ajax中就可以了
效果圖如下：
具體實現代買如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ width: 100%; height: 100%; background-color: #eee; } form{ width: 400px; height: 300px; border: 1px #000 solid; margin: 0 auto; } p{ padding: 5px 20px; } </style> </head> <body> <div id="app"> <form> <p> <label for="username">姓名:</label> <input type="text" v-model.number='user.username' id="username" autocomplete="off"> </p> <p> <label for="password">密碼:</label> <input type="text" v-model='user.password' id="password" autocomplete="off"> </p> <p> <input type="checkbox" id="a" v-model='user.checkedNames ' value="籃球"><label for="a">籃球</label> <input type="checkbox" id="b" v-model='user.checkedNames ' value="足球"><label for="b">足球</label> <input type="checkbox" id="c" v-model='user.checkedNames ' value="排球"><label for="c">排球</label> </p> <p> <input type="radio" v-model='user.sex' value="男" id="sex1"> <label for="sex2">男</label> <input type="radio" v-model='user.sex' value="女" id="sex2"> <label for="sex2">女</label> </p> <p> <select name="" id="" v-model='user.year'> <option value="">請選擇</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> </select> </p> <p> <input type="button" value="提交" @click="send"> </p> </form> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { user: { username: '', password: '', checkedNames: [], sex: '男', // 預設值在這裡設定才有效 year: '1998' // 預設值在這裡設定才有效 } }, methods: { send() { console.log(this.user); alert(JSON.stringify(this.user)) } } }) </script> </html>