vuejs+bootstrap实现简易的留言板功能
2017-09-22 14:15
916 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery-1.7.2.js"></script> <script src="bootstrap.js"></script> <script src="vue.js"></script> <title>bootstrap+vue简易留言板</title> <script> window.onload = function(arguments) { new Vue({ el: '#box', data: { myData:[], 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="" role="form"> <div class="form-group"> <label for="username"> 用户名: </label> <input v-model="username" type="text" id="username" placeholder="请输入用户名" class="form-control"> </div> <div class="form-group"> <label for="age"> 年 龄: </label> <input v-model="age" type="text" id="age" placeholder="请输入年龄" class="form-control"> </div> <div class="form-group"> <input v-on:click="add()" type="button" name="" value="添加" class="btn btn-primary"> <input type="reset" name="" value="重置" class="btn btn-danger"> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="text-success"> <h4>用户信息表</h4></caption> <thead> <tr class="text-info"> <th class="text-center">序号</th> <th class="text-center">名字</th> <th class="text-center">年龄</th> <th class="text-center">操作</th> </tr> </thead> <tbody> <tr v-for="item in myData" class="text-warning text-center" > <td style="vertical-align:middle">{{$index + 1}}</td> <td style="vertical-align:middle">{{item.name}}</td> <td style="vertical-align:middle">{{item.age}}</td> <td class="text-center"> <button class="btn btn-primary btn-sm">添加</button> <button v-on:click="nowIndex = $index" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">删除</button> </td> </tr> <tr> <td v-show="myData.length != 0" colspan="4" class="text-right"> <button class="btn btn-danger" 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> </tbody> </table> <!-- 模态框 --> <div role="dialog" class="modal fade bs-example-modal-sm" id="layer"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">确认删除么?</h4> </div> <div class="modal-body text-right"> <button class="btn btn-danger btn-sm" data-dismiss="modal">取消</button> <button v-on:click = "deleteMsg(nowIndex)" class="btn btn-primary btn-primary btn-sm" data-dismiss="modal">确定</button> </div> </div> </div> </div> </div> </body> </html>
这就是简易的留言板功能 包括删除 添加 全部删除等功能
相关文章推荐
- bootstrap+vue.js实现简单的购物车功能
- 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
- Vuejs 实现简易 todoList 功能 与 组件实例代码
- bootstrap vue.js实现tab效果
- Vue.js实现一个todo-list的上移,下移,删除功能
- Vue.js实现文章评论和回复评论功能
- require.js与bootstrap结合实现简单的页面登录和页面跳转功能
- vue2.0使用Sortable.js实现的拖拽功能
- 本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考,具体如下: 项目中后台一个商品库,新建活动时动态选择所需商品
- 使用Bootstrap和Vue实现用户信息的编辑删除功能
- element-ui+vue.js 简易留言板
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
- JS实现留言板功能[楼层效果展示]
- vue.js项目 el-input 组件 监听回车键实现搜索功能示例
- 原生js实现的局部页面打印功能,可以适用vue和jq
- springboot+mybatis+vuejs+bootstrap实现增删改
- vue.js 实现输入框动态添加功能
- Vue Cli与BootStrap结合实现表格分页功能
- 使用Bootstrap + Vue.js实现 添加删除数据