vue 简单留言本
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
window.onload=function() {
var vm=new Vue({
el:'#writebooks',
data:{
sites:[],
firstname:'',
lastname:'',
nowIndex:-100
},
methods:{
//添加事件
add:function(){
//添加 姓 名字
this.sites.push({
firstname:this.firstname,
lastname:this.lastname
});
this.firstname='';
this.lastname='';
},
//删除事件 进行判断删除 还是全部删除
deleteMsg:function(n){
if(n==-3){
this.sites=[];
}else{
this.sites.splice(n,1);
}
}
}
})
}
</script>
</head>
<body>
<div class="container" id="writebooks">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class=" control-label">名字</label>
<div class="">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字" v-model="firstname" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="control-label">姓</label>
<div class="">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓" v-model="lastname">
</div>
</div>
<div class="form-group">
<div >
<div class="checkbox">
<label>
<input type="checkbox">记住
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="">
<input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
<input type="reset" value="重置" class="btn btn-danger">
</div>
</div>
</form>
<table class="table table-bordered table-hover col-10">
<caption class="h2 text-info">用户信息表</caption>
<tr class="text-danger"> <th class="text-center">名字</th>
<th class="text-center">姓</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="(item) in sites" > <td>{{item.firstname}}</td>
<td>{{item.lastname}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
</td>
</tr>
<tr v-show="sites.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#alllayer">全部删除</button>
</td>
</tr>
<tr v-show="sites.length==0">
<td colspan="4" class="text-center text-muted">
<p>现在没有数据....</p>
</td>
</tr>
</table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="layer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">确定删除吗</h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-warning btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="alllayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" >确定删除吗</h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-info btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</body>
效果:
2018-05-13 23:22:25
vue 简单留言本的更多相关文章
- cookie的简单留言框
我们在网页浏览时退出后,再次进入时会有上次的记录,这就用的上cookie属性了,cookie就是服务器暂存放在你计算机上的一笔资料,好让服务器用来辨认你的计算机.当你在浏览网站的时候,Web服务器会先 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue简单实现
vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,
- html vue简单
1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果
在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...
- vue（2）—— vue简单语法运用，常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
随机推荐
- detours编译与windows下makefile学习
1.编译 windows环境命令行编译很少用,detours需要使用命令行编译,刚好试试,过程如下: 1.为了能够在所有目录中使用nmake命令,需要设置环境变量Path D:\Program Fil ...
- class1and2_tkinter之 Label & Button 标签和按钮
''' # ------------------------------------------------------------ # # 1. 使用tkinter设置一个标签 # # # 设计tk ...
- Jsoup 学习笔记
这里写自定义目录标题 Jsoup 学习笔记 解析 HTML 的字符串解析 URL 解析 本地文件解析 解析数据 DOM 解析 使用选择器解析 选择器概述 选择器组合用法 过滤用法 修改数据 HTML ...
- 初探.Net Core API 网关Ocelot（一）
一.介绍 Ocelot 是基于.NetCore实现的开源的API网关,支持IdentityServer认证.Ocelot具有路由.请求聚合.服务发现.认证.鉴权.限流熔断等功能,并内置了负载均衡器与S ...
- markdown 表情包大法
前段时间偶然发现了markdown竟然可以插入表情,而且竟然如此的简单 表情包网站 (有可能是官网):点击跳转 这些东西真的是有点意思啊,容我举个栗子
- 9_山寨系统调用 SystemCallEntry
思想: 再次在 GDT 中偷内存 搭建 系统调用需要的 逻辑框架与功能实现: 基本分解妄想: 构建系统调用的代码: 拷贝到 偷取的内存中: idt 向量 序号21位置: 8003ee00`0008f1 ...
- @Formula
@Formula 计算临时属性. 相当于可以关联查询字段,然后放在实体中当做属性使用. 任务:在User实体层,增加一个额外的属性,来获取Test表中的name字段. 1 表结构 User表 Tes ...
- php 查看linux服务器的磁盘使用情况
- Docker的镜像 导出导入
查看当前已经安装的镜像 vagrant@vagrant:~$ sudo docker images REPOSITORY TAG IMAGE ID CREATED SIZE mysql 5.7.22 ...
- Java 多线程 - 创建线程的方法 + Executors.newXXXThreadPool()缺点
java中创建线程的三种方法以及区别: https://www.cnblogs.com/3s540/p/7172146.html 通过Executor 的工具类,创建三种类型的普通线程池: https ...