Vue中用v-model绑定input中的text,radio,checkbox和select

最新推荐文章于 2023-02-28 16:07:58 发布

youngcave2

最新推荐文章于 2023-02-28 16:07:58 发布

阅读量785

点赞数 2

分类专栏： vue入门文章标签： javascript html vue input

本文链接：https://blog.csdn.net/yougcave/article/details/120791878

版权

vue入门专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、text

        <input type="text" v-model="str" />

二、radio

			<input type="radio" v-model="str1" value="苹果">苹果
			<input type="radio" v-model="str1" value="香蕉">香蕉
			<input type="radio" v-model="str1" value="西瓜">西瓜
			<input type="radio" v-model="str1" value="雪梨">雪梨

三、checkbox

			<input type="checkbox" v-model="str2" value="中国">中国<br>
			<input type="checkbox" v-model="str2" value="印度">印度<br>
			<input type="checkbox" v-model="str2" value="巴西">巴西<br>
			<input type="checkbox" v-model="str2" value="南非">南非<br>

四、select

			下拉选择框1：{{str3}}<br>
			<select  v-model="str3">
				<option value="牛奶">牛奶</option>
				<option value="鸡蛋">鸡蛋</option>
				<option value="油条">油条</option>
				<option value="豆浆">豆浆</option>
			</select>
			<br><br>
			下拉选择框2：{{str4}}<br>
			<select  v-model="str4" multiple>
				<option value="牛奶">牛奶</option>
				<option value="鸡蛋">鸡蛋</option>
				<option value="油条">油条</option>
				<option value="豆浆">豆浆</option>
			</select>

五、代码集合

    <body>
		
		<div id="app">
			输入框：{{str}}<br>
			<input type="text" v-model="str" />
			<br><br>
			单选框：{{str1}}<br>
			<input type="radio" v-model="str1" value="苹果">苹果
			<input type="radio" v-model="str1" value="香蕉">香蕉
			<input type="radio" v-model="str1" value="西瓜">西瓜
			<input type="radio" v-model="str1" value="雪梨">雪梨
			<br><br>
			复选框：{{str2}}<br>
			<input type="checkbox" v-model="str2" value="中国">中国<br>
			<input type="checkbox" v-model="str2" value="印度">印度<br>
			<input type="checkbox" v-model="str2" value="巴西">巴西<br>
			<input type="checkbox" v-model="str2" value="南非">南非<br>
			<br><br>
			下拉选择框1：{{str3}}<br>
			<select  v-model="str3">
				<option value="牛奶">牛奶</option>
				<option value="鸡蛋">鸡蛋</option>
				<option value="油条">油条</option>
				<option value="豆浆">豆浆</option>
			</select>
			<br><br>
			下拉选择框2：{{str4}}<br>
			<select  v-model="str4" multiple>
				<option value="牛奶">牛奶</option>
				<option value="鸡蛋">鸡蛋</option>
				<option value="油条">油条</option>
				<option value="豆浆">豆浆</option>
			</select>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					str:"",
					str1:"",
					str2:[],
					str3:"牛奶",
					str4:[]
				}
			})
		</script>
		
	</body>