vue 收集表單資料 （有錯誤的請各位大佬指點）
阿新 • • 發佈：2021-11-22
收集表單資料:
若: <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-mode1的初始值是非陣列，那麼收集的就是checked (勾選or未勾選，是布林值) (2)v-mode1的初始值是陣列，那麼收集的的就是value組成的陣列
備註: v-mode1的三 個修飾符: lazy:失去焦點再收集資料
若: <input type= "radio"/>,則v-model收 集的是value值，且要給標籤配置value值。
若: <input type=" checkbox"/> 1.沒有配置input的value屬性，那麼收集的就是checked (勾選or未勾選，是布林值) 2.配置input的value屬性:
(1 )v-mode1的初始值是非陣列，那麼收集的就是checked (勾選or未勾選，是布林值) (2)v-mode1的初始值是陣列，那麼收集的的就是value組成的陣列
備註: v-mode1的三 個修飾符: lazy:失去焦點再收集資料
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Each snowflake is a letter from the sky.
每片雪花都是天空的一封來信。 -->
<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>vue收集表單資料</title>
<!-- 引用vue檔案 -->
<script type="text/javascript" src="../study01/js/vue.js"></script>
<!-- css 樣式 -->
<style>
#root{
margin:0 auto;
width: 1100px;
height: 700px;
border: 1px solid black;
}
#root form{
margin-left: 250px;
}
h1{
text-align: center;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<!-- 收集表單資料:
若: <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-mode1的初始值是非陣列，那麼收集的就是checked (勾選or未勾選，是布林值)
(2)v-mode1的初始值是陣列，那麼收集的的就是value組成的陣列
備註: v-mode1的三 個修飾符:
lazy:失去焦點再收集資料
number:輸入字串轉為有效的數字
trim:輸入首尾空格過濾 -->
<div id="root">
<h1>傑然學生表冊</h1>
<!-- 表單提交控制檯 @submit.prevent="demoput"-->
<form @submit.prevent="demoput">
<!-- 互動表單 label -->
<label for="useName">賬號：</label>
<!-- v-model.trim trim 去掉前後輸入的空格-->
<input type="text" id="useName" v-model.trim="userInfo.useName"> <br /><br />
<label for="passName">密碼：</label>
<input type="password" id="passName" v-model="userInfo.passName"> <br /><br/>
<label for="passName">年齡：</label>
<!-- v-model 也是有修飾符 年齡防止提交到資料庫為字串報錯 去除引號-->
<input type="number" id="age" v-model.number="userInfo.age"> <br /><br/>
<!-- 性別單選框 -->
<label for="checkbox01">性別：</label>
<label for="man"> 男</label>
<input type="radio" id="man" name="sex" value="male"
v-model="userInfo.sex" />
<label for="woman">女</label>
<input type="radio" id="woman" name="sex" value="female"
v-model="userInfo.sex" /><br/><br />
<!-- 愛好 多選框 -->
<span>愛好：</span>
<label for="basketball">籃球</label>
<input type="checkbox" id="basketball" v-model="userInfo.habby" value="basketball">
<label for="football">足球</label>
<input type="checkbox" id="football"v-model="userInfo.habby" value="football">
<label for="game">打遊戲</label>
<input type="checkbox" id="game"v-model="userInfo.habby" value="game"><br/><br />
<!-- 校區 下拉框 -->
<span>所屬校區：</span>
<select v-model="userInfo.city">
<option value="">請選擇校區</option>
<option value="yunnan">雲南</option>
<option value="zhaotong">昭通</option>
<option value="lijiang">麗江</option>
<option value="wenshan">文山</option>
<option value="chengjiang">澄江</option>
</select><br/><br />
<!-- 更多資訊 多行文字框 -->
<span>更多資訊</span>
<!-- v-model.lazy 修飾符 在失去焦點的一瞬間才收集 -->
<textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br/><br />
<input type="checkbox" v-model="userInfo.sgree"> 我也閱讀和接收
<a href="www.baidu.com">《使用者協議》</a><br/><br />
<button>提交資料</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止執行時提示開發版本
new Vue({
el:"#root",
data:{
// userInfo 管理使用者資訊
userInfo:{
useName:'',
passName:'',
age,
sex:'male',
habby:[], // habby 初始值可以影響v-moddel的初始值 複選框可以寫成陣列形式[]
city:"",
other:'',
sgree:''
}
},
methods:{
demoput(){
// 提交表單資訊到控制檯 userInfo直接換成_data也可以
console.log(JSON.stringify(this.userInfo))
}
},
})
</script>
</body>
</html>