Vue一个简单的留言案例 for循环和函数应用

运行后的界面,数据没有连接数据库,只是用的当前文件数组存储。关键点在里面有注释。
Vue一个简单的留言案例 for循环和函数应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css"/>
		<script src="lib/jquery-3.1.1.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		
		<script src="lib/vue.min.js"></script>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						myData:[
							{name:'张丰',age:'16'},
							{name:'刘伟',age:'38'}
						],
						//只要是数据就需要在data里面有所体现,下面的add函数要将username和age添加,所以要在data里面出现
						username:'',
						age:'',
						nowIndex:'-100'				
					},
					methods:{
						add:function(){
							this.myData.push({
								name:this.username,
								age:this.age
							});
							this.username='';
							this.age=''
						},
						deleteMsg:function(n){
							if(n==-2)
							{
								this.myData=[];
							}else{
								this.myData.splice(n,1);
							}							
						}
					}
				});
			};
		</script>
	</head>
	<body>
		<div class="container" id="box">
			<form action="" method="post" role="form">
				<div class="form-group">
					<label for="username">用户名:</label>
					<input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username"/>
				</div>
				<div class="form-group">
					<label for="age">年龄:</label>
					<input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age"/>
				</div>
				<div class="form-group">
					<input type="button" value="添加" class="btn btn-primary" v-on:click="add()"/>
					<input type="reset" value="重置" class="btn btn-danger"/>
				</div>
			</form>
			<hr>
			<table class="table table-bordered table-hover">
				<caption class="h2 text-info">用户信息表</caption>
				<tr>
					<th class="text-center">序号</th>
					<th class="text-center">名字</th>
					<th class="text-center">年龄</th>
					<th class="text-center">删除</th>
				</tr>
				<tr class="text-center" v-for="(item,index) in myData">
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
					<td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=(index)">删除</button></td>
					<!--
                    	时间:2018-02-27
                    	描述:v-on:click="nowIndex=(index)" 这里,一开始是用
                    	v-on:click="nowIndex={{index}}"获取参数,但发现会出现页面空白,也是在论坛中有人指点下用了上面的发现可以正常使用,同一种东西需要用不同样式写才可以,这其实还算BUG的。
                    -->
				</tr>
				<tr v-show="myData.length!=0">
					<td colspan="4" class="text-right"><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">删除全部</button></td>
				</tr>
				<tr v-show="myData.length==0">
					<td colspan="4" class="text-center text-muted"><p>暂无数据</p></td>
				</tr>
			</table>
			
			<!--
            	时间:2018-02-26
            	描述:弹出窗
            	1、在下面定义出来添加层内容,其中class和id在上面的按钮处要用到
            	2、上面按钮中,data-toggle用于填写class名称,data-target填写id名称,这样就能关联在一起
            	
            	3、下面的data-dismiss用于绑定关闭事件
            -->
			<div role="dialog" class="modal fade" id="layer">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span>&times;</span>
							</button>
							<h4 class="modal-title">确认删除</h4>
						</div>
						<div class="modal-body text-right">
							<button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
							<button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND