当前位置：网站首页>17_ Collect form data

17_ Collect form data

2022-07-20 06:55:00 【ID does not exist.】

Collect form data

Collect form data ：

​ 1. if ：, be v-model The collection is value value , What the user enters is value value .

​ 2. if ：, be v-model The collection is value value , And configure the label value value .

​ 3. if ：

​ （1） No configuration input Of value attribute , So the collection is checked（ Check or Uncheck , Boolean value ）

​ （2） To configure input Of value attribute :

​ v-model The initial value of is a non array , So the collection is checked（ Check or Uncheck , Boolean value ）

​ v-model The initial value of is an array , So the collection is value Array of components

​ 4.v-model The three modifiers of ：

​ lazy： Lose focus and collect data

​ number： The input string is converted to a valid number

​ trim： Input the first and last spaces to filter 

<body>
		<div id="root">
			<form @submit.prevent="demo">
				 account number ：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				 password ：<input type="password" v-model="userInfo.password"> <br/><br/>
				 Age ：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				 Gender ：
				 male <input type="radio" name="sex" v-model="userInfo.sex" value="male">
				 Woman <input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				 hobby ：
				 Study <input type="checkbox" v-model="userInfo.hobby" value="study">
				 Play the game <input type="checkbox" v-model="userInfo.hobby" value="game">
				 having dinner <input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				 Campus 
				<select v-model="userInfo.city">
					<option value=""> Please select Campus </option>
					<option value="beijing"> Beijing </option>
					<option value="shanghai"> Shanghai </option>
					<option value="shenzhen"> Shenzhen </option>
					<option value="wuhan"> wuhan </option>
				</select>
				<br/><br/>
				 Other information ：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree"> Read and accept <a href="http://www.atguigu.com">《 User agreement 》</a>
				<button> Submit </button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
原网站

版权声明
本文为[ID does not exist.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190137524731.html

边栏推荐

猜你喜欢

随机推荐