vue2_收集表單資料、過濾器
阿新 • • 發佈:2022-04-04
1、收集表單資料
收集表單資料
-
若:
<input type="text"/>
,則v-model
收集的是value
值,使用者輸入的就是value
值。 -
若:
<input type="radio"/>
,則v-model
收集的是value
值,且要給標籤配置value
屬性。 -
若:
<input type="checkbox"/>
1.沒有配置input的value屬性,那麼收集的就是checked(勾選 or 未勾選,是布林值)
2.配置input的value屬性:
(1)v-model的初始值是非陣列,那麼收集的就是checked(勾選 or 未勾選,是布林值)
(2)v-model的初始值是陣列,那麼收集的的就是value組成的陣列。
備註:v-model的三個修飾符:
lazy:失去焦點再收集資料
number:輸入字串轉為有效的數字
trim:輸入首尾空格過濾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>收集表達資訊</title> <script src="../vueBaseJs/vue.js"></script> </head> <body> <div id="root"> <form @submit.prevent="demo"> 賬號:<input type="text" v-model.trim="userInfo.account"> <br/><br/> 密碼:<input type="password" v-model="userInfo.password"> <br/><br/> 年齡:<input type="number" v-model.number="userInfo.age"> <br/><br/> 性別: 男<input type="radio" name="sex" value="male" v-model="userInfo.sex" > 女<input type="radio" name="sex" value="female" v-model="userInfo.sex"> <br/><br/> 愛好: 學習<input type="checkbox" v-model="userInfo.hobby" value="study"> 打遊戲<input type="checkbox" v-model="userInfo.hobby" value="game"> 吃飯<input type="checkbox" v-model="userInfo.hobby" value="eat"> <br/><br/> 所屬校區 <select v-model="userInfo.city"> <option value="">請選擇校區</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">武漢</option> </select> <br/><br/> 其他資訊: <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/> <input type="checkbox" v-model="userInfo.agree" >閱讀並接受<a href="">《使用者協議》</a> <button id="btn1">提交</button> </form> </div> <script type="text/javascript"> Vue.config.productionTip=false;//阻止vue啟動時生成生產提示 const vm=new Vue({ el:"#root", data:function(){ return { userInfo:{ account:"", password:"", age:0, sex:"male", hobby:[],//hobby的初始值能夠影響v-model收集的資料 city:"beijing", other:"", agree:false, }, } }, methods:{ demo(){ console.log(JSON.stringify(this.userInfo)); } } }); </script> </body> </html>