文档章节

基予bootstrap和vue实现To do list

杜宝
 杜宝
发布于 2017/08/30 11:29
字数 412
阅读 41
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 2
博文 33
码字总数 16488
作品 0
兰州
vue结合bootstrap4.0使用

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

杏sunshine
05/16
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2017/04/20
0
0
web前端Vue.js经典开源项目汇总

  Vue是什么?   Vue.js(读音/vju/,类似于view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易...

爱前端
2017/12/03
0
0
用 React 和 Vue 创建了两个完全相同的应用后,发现了这些差异

译者 jonjia 爱贝睿技术团队 在工作中使用 Vue 一段时间后,对它的工作原理有了相当深入的了解。然而,我很想知道篱笆另一边的草地是什么样 - React。 我已经阅读了 React 文档,也观看了一些...

爱贝睿技术团队
08/03
0
0
喜大普奔,Ant Design of Vue 1.0版本发布🎉🎉🎉

vue-antd-ui是一个站在巨人(antd)肩膀上的UI组件库,有着其它组件库没有的优势,几乎继承了antd所有的功能特点,自带antd各种buff。 vue-antd-ui诞生于17年9月份,18年3月份正式开源,800多次...

zeka
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
2
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
6
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
42
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部