vuejs+bootstrap实现简易的留言板功能
来源:互联网 发布:英语有声阅读软件 编辑:程序博客网 时间:2024/06/04 19:08
<!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>
这就是简易的留言板功能 包括删除 添加 全部删除等功能
阅读全文
1 0
- vuejs+bootstrap实现简易的留言板功能
- 实现有管理功能的ASP留言板
- PHP实现留言板功能
- PHP实现留言板功能
- Jsp简易留言板的实现:application与Arraylist应用示例
- 基于MVC的简易留言板
- 使用vuejs实现简单的图书增加删除功能
- 地图功能的简易实现
- 简易留言板
- 简易留言板
- php实现留言板程序功能
- vue实现简易留言板(todolist)
- HTML5本地储存实现--简易留言板
- php结合mysql数据库实现简单留言板的功能
- 控制台留言板,主要实现文件操作的功能
- php 留言板 如何实现登录之后才能留言的功能
- MYSQL操作05_留言板功能的实现
- 使用Java+MySQL做的简易留言板
- php bz2扩展安装
- html常见兼容性问题(来自牛客网)
- ubuntu samba安装
- HDU 4336 Card Collector 动态规划-概率DP
- UML统一建模语言简介及使用
- vuejs+bootstrap实现简易的留言板功能
- linux下I2C驱动架构全面分析
- HttpModule与HttpHandler详解
- jstree默认图标详解
- iOS WKWebView简介
- Laravel缓存的使用
- Linux framebuffer显示bmp图片
- ASCII、Unicode和UTF-8
- 查看Oracle最耗时的SQL