简单的数据双向绑定

最新推荐文章于 2022-06-06 19:19:42 发布

买还私奔的

最新推荐文章于 2022-06-06 19:19:42 发布

阅读量146

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_44917409/article/details/94018053

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

开始了Vue的学习，交给大家一个简单的数据绑定。
用到的几个Vue命令
v-if 根据表达式的真假来插入和删除元素
v-else ：v-else指令为v-if添加一个else块
v-show：控制切换一个元素的显示和隐藏
v-on：为HTML元素绑定事件监听
v-model：将用户的输入同步到视图上
v-bind：绑定HTML元素的属性
v-for：遍历data中的数据，并在页面进行数据展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量</title>

</head>
<body>
	<div id="app">
		<span>用户名：</span><input type="text" v-model="name" vlaue="" id="name">
		<br>
		<span>密码:</span><input type="password" v-model="password" value="" id="password">
		<br>
		<span>性别：</span>
		<input type="radio" name="sex" value="男" v-model="sex" id="nan">男
		<input type="radio" name="sex" value="女" v-model="sex" id="nv">女
		<br>
		<span>爱好：</span>
		<input type="checkbox" value="eat" v-model="arr" id="eat">吃
		<label for="eat"></label>
		<input type="checkbox" value="play" v-model="arr" id="play">玩
		<label for="play"></label>
		<input type="checkbox" value="sleep" v-model="arr" id="sleep">睡觉
		<label for="sleep"></label>
		<input type="checkbox" value="return" v-model="arr" id="return">return
		<label for="return"></label>
		<br>
		<button id="btn" v-on:click="toggle">整</button>
		<br>
		<div id="all" v-if="flag">
		<span>用户名：</span><span>{{name}}</span>
		<br>
		<span>密码：</span><span>{{password}}</span>
		<br>
		<span>性别：</span><span>{{sex}}</span>
		<br>
		<span>爱好：</span><span>{{arr}}</span>
		</div>
	</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			name:"",
			password:"",
			sex:"",
			arr:[],
			flag:false
		},

		methods:{
			toggle(){
				this.flag=!this.flag
			}
		}

	})
</script>
</html>

实现样式