Vue零基础小白2天步入实战

最新推荐文章于 2020-06-07 22:46:56 发布

liu126120

最新推荐文章于 2020-06-07 22:46:56 发布

阅读量153

点赞数

分类专栏： for元素数据绑定文章标签： vue

本文链接：https://blog.csdn.net/liu126120/article/details/105451920

版权

for元素数据绑定专栏收录该内容

1 篇文章 1 订阅

订阅专栏

form元素数据绑定

（1）数据绑定之实现双向数据绑定v-model指令（input）：
v-model指令用来在input，textarea，select，checkbox，radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{xinxi}}<br>
			<input type="text" v-model="xinxi">
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				xinxi:"刘某某"
				
			}
		})
	</script>
</html>

在这里插入图片描述 （2）数据绑定之v-model指令–textarea中的应用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{xinxi}}<br>
			<input type="text" v-model="xinxi">
			<textarea v-model="xinxi"></textarea>
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				xinxi:"刘某某"
				
			}
		})
	</script>
</html>

在这里插入图片描述 （3）数据绑定之v-model指令–select中的应用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<select v-model="xuanzhong" name="zhi">
				<option value ="0">请选择</option>
				<option value ="p">苹果</option>
				<option value ="x">香蕉</option>
				<option value ="l">荔枝</option>
			</select>
			
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				xuanzhong:"x"
				
			}
		})
	</script>
</html>

在这里插入图片描述 （4）数据绑定之v-model指令–ckeckbox中的应用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" v-model="xuanzhong">
			<label>{{xuanzhong}}</label>
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				xuanzhong:true
				
			}
		})
	</script>
</html>

在这里插入图片描述 （5）数据绑定之v-model指令–radio中的应用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="radio" v-model="xuanzhong" value="男">男
			<input type="radio" v-model="xuanzhong" value="女">女
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				xuanzhong:"男"
				
			}
		})
	</script>
</html>

在这里插入图片描述

liu126120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue零基础小白2天步入实战

form元素数据绑定（1）数据绑定之实现双向数据绑定v-model指令（input）：v-model指令用来在input，textarea，select，checkbox，radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。<!DOCTYPE html><html> <head> <meta charset="...
复制链接

扫一扫