<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDoList</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<script src="vue.min.js"></script>
</head>
<body>
<div id="box" class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="form-group">
<label for="exampleInputEmail1">用户名</label><input type="text" class="
user form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label><input type="password" class="
psd form-control" id="exampleInputPassword1" />
</div>
<button style="width:300px;margin: 10px auto" @click="submit()" >Submit</button>
</div>
<div class="col-md-12 column">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-2">
编号
</th>
<th class="col-md-4">
姓名
</th>
<th class="col-md-4">
密码
</th>
<th class="col-md-2">
<button type="button" class="btn btn-default btn-primary">按钮</button>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(m, index) in msg">
<!--官方文档声明：$index和$key被移除 -->
<td>
{{ index+1 }}
</td>
<td>
{{ m[0] }}
</td>
<td>
{{ m[1] }}
</td>
<td>
<button type="button" class="btn btn-default btn-primary" v-on:click="getIndex(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
msg:[["user","123456"],["admin","123"]]
},
methods:{
getIndex: function(index){
vm.msg.splice(index,1);
},
submit:function(){
var arr=[]
var user=document.querySelector(".user").value;
var psd=document.querySelector(".psd").value;
arr.push(user);
arr.push(psd);
vm.msg.push(arr);
}
}
});
</script>
</body>
</html>
纯属自娱，看客见谅。。。
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
