Vue 表單資料收集
阿新 • • 發佈：2022-04-14
文字框
示例：
賬號：<input type="text" v-model.trmi="userInfo.account">
密碼：<input type="password" v-model="userInfo.password">
簽名：<textarea v-model.lazy="userInfo.other"></textarea>
年齡：<input type="number" v-model.number="userInfo.age">
v-model.trmi：過濾掉內容左右兩邊的的空格，但內容中的空格沒法過濾
v-model.lazy ：失去焦點再收集資料
v-model.number：輸入字串轉為有效的數字
單選框
示例
性別：
男<input type="radio" v-model="userInfo.sex" name="sex" value="男">
女<input type="radio" v-model="userInfo.sex" name="sex" value="女">
同一型別的單選框需要設定同一個 name 如：name="sex"
需要為每一個單選框設定 value 值才能收集到資料
<input type="checkbox" v-model="userInfo.agree">閱讀並接受<a href="#">《使用者協議》</a>
這裡未設定 value 值，收集 checked（勾選 or 未勾選，是布林值）
多選框與下拉框
多選框示例
愛好：
吃飯<input type="checkbox" v-model="userInfo.hobby" value="吃飯">
睡覺<input type="checkbox" v-model="userInfo.hobby" value="睡覺">
喝水<input type="checkbox" v-model="userInfo.hobby" value="喝水">
下拉框示例
<select v-model="userInfo.city"> <option value="">請選擇地區</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="深圳">深圳</option> <option value="廣州">廣州</option> </select>
需要每一項設定 value 值
例項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收集表單資料</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
賬號：<input type="text" v-model.trmi="userInfo.account">
<br><br>
密碼：<input type="password" v-model="userInfo.password">
<br><br>
性別：
男<input type="radio" v-model="userInfo.sex" name="sex" value="男">
女<input type="radio" v-model="userInfo.sex" name="sex" value="女">
<br><br>
年齡：<input type="number" v-model.number="userInfo.age">
<br><br>
愛好：
吃飯<input type="checkbox" v-model="userInfo.hobby" value="吃飯">
睡覺<input type="checkbox" v-model="userInfo.hobby" value="睡覺">
喝水<input type="checkbox" v-model="userInfo.hobby" value="喝水">
<br><br>
所在地區：
<select v-model="userInfo.city">
<option value="">請選擇地區</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="廣州">廣州</option>
</select>
<br><br>
簽名：
<textarea v-model.lazy="userInfo.other"></textarea>
<br><br>
<input type="checkbox" v-model="userInfo.agree">閱讀並接受<a href="#">《使用者協議》</a>
<br><br>
<button>提交</button>
</form>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
userInfo: {
account: '',
password: '',
sex: 'male',
age: '',
hobby: [],
city: '',
other: '',
agree: false
}
},
methods: {
demo() {
alert('提交成功')
console.log(JSON.stringify((this.userInfo)))
}
}
})
</script>
</html>