输入内容绑定v-model使用

v-model

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

单行输入框文本

<input type="text" name="username" v-model="username"  value="" />

<script type="text/javascript">
			let app = new Vue ({
				el:"#app",
				data:{
					username:"小明"
				}
			})
		</script>

多行输入框文本

<h1>多行文本</h1>
<textarea rows="" cols="" v-model="username"></textarea>

复选框

<h1>选择喜欢的水果</h1>
<span v-for="item in fruits">
 	{{item}}
	<input  type="checkbox" name="fruits" id="" v-model="checkFruits" :value="item" />
</span>
<h2>{{checkFruits}}</h2>

		<script type="text/javascript">
			let app = new Vue ({
				el:"#app",
				data:{
					username:"小明",
					fruits:['苹果','雪梨','葡萄','西瓜'],
					checkFruits:[],
				}
			})
		</script>

单选框

		<h1>选择最喜欢的水果</h1>
			<span v-for="item in fruits">
				{{item}}
				<input type="radio" name="favorite" v-model="radioFruits" :value="item" />
			</span>
			<h2>{{radioFruits}}</h2>

		<script type="text/javascript">
			let app = new Vue ({
				el:"#app",
				data:{
					username:"小明",
					fruits:['苹果','雪梨','葡萄','西瓜'],
					radioFruits:"",
				}
			})
		</script>

选项框

			<h1>选择你居住的城市</h1>
			<select v-model="chooseCity" >
				<!-- <option disabled value="">请选择</option> -->
				<option v-for="item in citys" :value ="item">{{item}}</option>
			</select>
			<h3>{{chooseCity}}</h3>

		<script type="text/javascript">
			let app = new Vue ({
				el:"#app",
				data:{
					citys:['北京','深圳','成都','上海'],
					chooseCity:""
				}
			})
		</script>

多项框

			<h1>选择你喜欢的城市</h1>
			<select v-model="moreCity" multiple="multiple" >
				<option v-for="item in citys" :value ="item">{{item}}</option>
			</select>
			<h3>{{moreCity}}</h3>

<script type="text/javascript">
			let app = new Vue ({
				el:"#app",
				data:{
					citys:['北京','深圳','成都','上海'],
					moreCity:"",
				}
			})
		</script>

获取值

			<h1>将字符串变为数字获取</h1>
			<input type="text" name="age" v-model="age" value="" />

<script type="text/javascript">
			let app = new Vue ({
				el:"#app",
				data:{
					age：16
				},
				watch:{
					age:function(val){
						console.log(val)
					}
				}
			})
		</script>