文档章节

基予bootstrap和vue实现To do list

杜宝
 杜宝
发布于 2017/08/30 11:29
字数 412
阅读 48
收藏 0

先上效果图:

 

其中用到的知识点:有bootstrap和bootstrap.js,以及Vue的常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDoList</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="lib/vue.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var vue = new Vue({
                el: '.box',
                data: {
                    userData: [],
                    username: '',
                    password: '',
                    nowIndex: -100
                },
                methods: {
                    add: function () {
                        this.userData.push({
                            name: this.username,
                            passwd: this.password
                        });
                        //清空
                        this.username = '';
                        this.password = '';

                    }
                    ,
                    delet: function (n) {
                        if (n == -2) {
                            this.userData = [];

                        } else {
                            this.userData.splice(n, 1);
                        }


                    },
                }
            })
        }


    </script>
</head>
<body>
<div class="box">
    <form role="form">
        <div class="form-group">

            <label for="username">用户名</label>
            <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username">

        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" class="form-control" placeholder="请输入密码" v-model="password">
        </div>
        <div class="form-group text-center">
            <input type="button" value="提交" class="btn btn-primary text-left" @click="add">
            <input type="reset" value="重置" class="btn btn-danger">
        </div>

    </form>
    <hr>
    <div class="form-group">
        <table class="table table-bordered table-hover">
            <caption class="h3 text-info">用户信息表</caption>
            <tr class="text-warning">
                <th class="text-center">序号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">密码</th>
                <th class="text-center">操作</th>
            </tr>
            <tr class="text-center" v-for="item in userData">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.passwdsss}}</td>
                <td>
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
                            @click="nowIndex=$index">删除
                    </button>
                </td>
            </tr>
            <tr v-show="userData.length!=0">
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm" @click="nowIndex=-2" data-toggle="modal" data-target="#layer">
                        删除全部
                    </button>
                </td>
            </tr>
            <tr v-show="userData.length==0">
                <td colspan="4" class="text-center text-muted">
                    <p>暂无数据....</p>
                </td>
            </tr>


        </table>


    </div>
    <!--模态框 弹出框-->
    <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>&times;</span>
                    </button>
                    <h4 class="modal-title">确认删除么?</h4>
                </div>
                <div class="modal-body text-right">
                    <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                    <button data-dismiss="modal" class="btn btn-danger btn-sm" @click="delet(nowIndex)">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 3
博文 37
码字总数 30098
作品 0
兰州
私信 提问
vue加载的多选下拉框

最近写前端,需要一个实现可多选的下拉款,多选的功能是用bootstrap select组件实现的,但是这个组件用在固定option时可以正常加载成多选的形式,关键代码如下: 效果如图: 但是用在vue动态...

怒摘一板
2017/12/15
2.6K
6
vue-bootstrap-pagination 分页求助

1、问题:引用vue-bootstrap-pagination组件,报Property or method "pagination" is not defined 具体错误如下图 2、代码实现 2.1 vue模板引用分页 2.2 vue实现...

安静的程序猿
11/08
65
1
Bootstrap-vue — Vue.js 与 Bootstrap 的快速集成实现

Bootstrap-Vue 为 Vue.js 2.4+ 提供了 Bootstrap V4 组件和最全面的网格系统的实现,它具有广泛的自动化 WAI-ARIA 辅助功能标记。

王练
2017/12/19
11
1
vue结合bootstrap4.0使用

一般vue都是结合elementui 、mint-ui等使用,但是自己还是想结合bootstrap来使用,在使用的过程中遇到一些报错 使用bootstrap 要结合jQuery来使用的,首先要安装依赖 npm install jquery --s...

杏sunshine
05/16
0
0
Vue.js ToDoList和MVVM模式

安装Vue插件 兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 更新日志 最新稳定版本:2.5.17 每个版本的...

program_黑
10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Flink-数据流编程模型

1、抽象等级 Flink提供了不同级别的抽象来开发流/批处理应用程序。 1) 低层级的抽象 最低层次的抽象仅仅提供有状态流。它通过Process函数嵌入到DataStream API中。它允许用户自由地处理来自一...

liwei2000
21分钟前
1
0
Java开发Swing实战JFrame和JTabbedPane容器的用法详细解析

概述: 项目是一个桌面程序,涉及标签和按钮组件、布局管理器组件、面板组件、列表框和下拉框组件等组件,以及Swing事件处理机制。 下面先从最基础的界面开始。 /** * @author: lishuai * @...

金铭鼎IT教育
27分钟前
7
0
flask 之旅

环境 为了正确地跑起来,你的应用需要依赖许多不同的软件。 就算是再怎么否认这一点的人,也无法否认至少需要依赖Flask本身。 你的应用的运行环境,在当你想要让它跑起来时,是至关重要的。 ...

hblt-j
27分钟前
5
0
easyui的上传文件

记录一下自己亲手操刀easyui的心得:不用不知道,一用就问题多,网上查资料,有用的真的太少了 ——————————————————正文 FileBox,还是不错的讲真,至少我去自己写就gaga了...

anlve
28分钟前
4
0
如何做好SQLite 使用质量检测,让事故消灭在摇篮里

本文由云+社区发表 SQLite 在移动端开发中广泛使用,其使用质量直接影响到产品的体验。 常见的 SQLite 质量监控一般都是依赖上线后反馈的机制,比如耗时监控或者用户反馈。这种方式问题是: ...

腾讯云加社区
30分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部