Vue数据表单添加/删除/排序
框架效果图
使用框架：
1.bootstrap官网链接Bootstrap
2.vue官网链接Vue
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue数据表单操作</title>
<!-- 1.引用css样式 -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/index.css" />
<!-- 2.引用jquery样式 -->
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<!-- 3.搭框架——内容展示区域 -->
<div class="container">
<!-- 表单输入 -->
<form class="form">
<!-- v-model绑定输入框 -->
<div class="name-group">
<label>姓名</label>
<input type="text" name="" class="form-control" v-model="nodeName" />
</div>
<div class="age-group">
<label>年龄</label>
<input type="text" name="" class="form-control" v-model="nodeAge" />
</div>
</form>
<!-- Boostrap按钮样式 btn-primary-->
<button class="btn btn-primary" @click="sure">确定</button>
<button class="btn btn-primary" @click="soret">按年龄排序</button>
<table class="table table-hover table-bordered text-center">
<thead class="text-center">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>选项</td>
</tr>
</thead>
<tbody>
<tr v-for="i in msg">
<td>{{$index+1}}</td>
<td>{{i.name}}</td>
<td>{{i.age}}</td>
<td><button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleNow" @click="$index=this.index" >删除</button></td>
</tr>
<tr v-show="this.msg.length?false:true">
<td colspan="4">请输入数据</td>
</tr>
<tr v-show="this.msg.length?true:false">
<td colspan="4">
<button class="btn btn-danger" data-toggle="modal" data-target="#deleall">全部删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 单个数据删除弹窗 -->
<div class="modal fade" id="deleNow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">确认删除</h4>
</div>
<div class="modal-body">
确定要删除当前数据?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="deleOn">确认删除</button>
</div>
</div>
</div>
</div>
<!-- 全部数据删除弹窗 -->
<div class="modal fade" id="deleall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">删除全部</h4>
</div>
<div class="modal-body">
确定要删除全部数据?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="deleAll">确认删除</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"body",
data:{
nodeName:"",
nodeAge:"",
// 默认数据
msg:[
{"name":"你好","age":"20"},
{"name":"乔安","age":"24"}
],
index:0,
},
methods:{
// 添加
sure:function(){
if (this.nodeName&&this.nodeAge) {
this.msg.push({
"name":this.nodeName,
"age":this.nodeAge
}),
this.nodeName="",//清空输入框
this.nodeAge=""
}
},
// 全部删除
deleAll:function(){
this.msg=[]
},
// 删除单个
deleOn:function(){
this.msg.splice(this.index,1)
},
// 按年龄排序
soret:function(){
this.msg.sort(function(a,b){
return b.age-a.age
})
}
}
})
</script>
</body>
</html>
效果演示
vue数据表单基础操作，增加，删除，排序
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
