html 基于vue.js的简单留言板
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 基于vue.js的简单留言板相关的知识，希望对你有一定的参考价值。
$(function(){
var vm = new Vue({
el: '#box',
data: {
items: [],
username: '',
age: '',
nowIndex: -2,
modelTitle: "确认删除",
},
methods: {
clickDelete: function(n){
this.nowIndex = n;
this.modelTitle = "确认删除该条数据吗?";
},
clickDeleteAll: function(){
this.nowIndex = -1;
this.modelTitle = '确认删除所有数据吗?'
},
addData: function(){
if(this.username != '' && this.age != ''){
this.items.push({'username':this.username, 'age':this.age});
this.username = '';
this.age = '';
}
},
deleteData: function(n){
if(n >= 0){
this.items.splice(n, 1);
} else if (n == -1){
this.items = [];
}
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue留言板</title>
<link rel="stylesheet" href="lib/bootstrap.css">
<script src="lib/jquery.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="vue.js"></script>
<script src="vuemsg.js"></script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" placeholder="输入用户名" autofocus v-model="username">
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age" placeholder="输入年龄" v-model="age">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" value="添加" v-on:click="addData()">
<input type="reset" class="btn btn-danger" value="重置">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-info text-center" >用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr v-show="items.length!=0" v-for="item in items">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{item.username}}</td>
<td class="text-center">{{item.age}}</td>
<td class="text-center">
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" v-on:click="clickDelete($index)">删除</button>
</td>
</tr>
<tr>
<td colspan="4" class="text-right" v-show="items.length != 0">
<button class="btn btn-danger" data-toggle="modal" data-target="#myModal" v-on:click="clickDeleteAll()">删除全部</button>
</td>
</tr>
<!--没有数据时的显示-->
<tr>
<td colspan="4" class="text-muted text-center" v-show="items.length==0" >暂无数据...</td>
</tr>
<!--模态框-->
<div class="modal fade" role="dialog" id="myModal" tabindex="-1" aria-labelledby="myModelLabel">
<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="myModelLabel">{{modelTitle}}</h4>
</div>
<!--模态框内容-->
<div class="modal-body text-right">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteData(nowIndex)">确定</button>
</div>
</div>
</div>
</div>
</table>
</div>
</body>
</html>以上是关于html 基于vue.js的简单留言板的主要内容，如果未能解决你的问题，请参考以下文章