vue中的v-model的一些简单应用

最新推荐文章于 2024-08-16 15:49:18 发布

水，水，水

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量375

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44499394/article/details/108890521

版权

vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

话不多少，直接上图上代码

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<style>
			tr td {
				border: 1px solid gray;
				padding: 10px;
			}

			table {
				border-collapse: collapse;
				width: 600px;
				table-layout: fixed;
			}

			tr.firstLine {
				background-color: lightGray;
			}
		</style>

		<div id="div1">
			<table align="center">
				<tr class="firstLine">
					<td>视图类型</td>
					<td>输入数据</td>
					<td>绑定到vue的数值</td>
				</tr>
				<tr>
					<td>
						单行文本
					</td>
					<td>
						<input v-model="input" placeholder="输入数据" />
					</td>
					<td>
						<p>{{input}}</p>
					</td>
				</tr>
				<tr>
					<td>
						多行文本
					</td>
					<td>
						<textarea v-model="area" placeholder="输入数据"></textarea>
					</td>
					<td>
						<p>{{area}}</p>
					</td>
				</tr>
				<tr>
					<td>单个复选框</td>
					<td>
						<!-- <p v-model="check" type="checkbox" ></p> -->
						<input v-model="check" type="checkbox" />11
					</td>
					<td>
						<p>{{check}}</p>
					</td>
				</tr>
				<tr>
					<td>
						多个复选框
					</td>
					<td>
						<input v-model="checks" type="checkbox" value="11" />11<br />
						<input v-model="checks" type="checkbox" value="22" />22<br />
						<input v-model="checks" type="checkbox" value="33" />33<br />
					</td>
					<td>
						<p>{{checks}}</p>
					</td>
				</tr>
				<tr>
					<td>
						单选按钮
					</td>
					<td>
						<input v-model="radio" type="radio" value="男" />男<br />
						<input v-model="radio" type="radio" value="女" />女
					</td>
					<td>
						<p>{{radio}}</p>
					</td>
				</tr>
				<tr>
					<td>单选下拉框</td>
					<td><!--size代表下拉框多长，固定死长度-->
						<!--<option disabled value="请选择">请选择</option>
						disabled代表这一行不可选中-->
						<select v-model="select" size="4">
							<option>11</option>
							<option>22</option>
							<option>33</option>
							<option>44</option>
						</select>
					</td>
					<td>
						<p>{{select}}</p>
					</td>
				</tr>
				<tr>
					<td>
						多选下拉框
					</td>
					<td>
						<select v-model="selects" multiple="4" >
							<!--multiple 表示多选的属性-->
							<option>11</option>
							<option>22</option>
							<option>33</option>
							<option>44</option>
						</select>
					</td>
					<td>
						<p>{{selects}}</p>
					</td>
				</tr>
				<tr>
					<td>
						单个复选框(判断框)
					</td>
					<td>
						默认值是true或者false,也可以修改为自定义的值<br>
						<input v-model="torf" type="checkbox" true-value="1" false-value="2"/>
					</td>
					<td>
						<p>{{torf}}</p>
					</td>
				</tr>
			</table>
		</div>



		<script type="text/javascript">
			new Vue({
				el: '#div1',
				data: {
					input: '',
					area: '',
					check: '',
					checks: [],
					radio: '',
					select:'',
					selects:[],
					torf:''
				}
			})
		</script>


	</body>
</html>

图片显示效果