文档章节

基予bootstrap和vue实现To do list

杜宝
 杜宝
发布于 2017/08/30 11:29
字数 412
阅读 40
收藏 0
点赞 0
评论 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
WEB前端学习:vue图标组件Vue-Awesome,让你快速方便的使用font-awesome图标

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
06/04
0
0
为什么我们从Angular 2迁移到Vue.js(为什么我们没有选择React)

在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本。经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定。 8个月前,我们的前端在使用Angular 2.确...

新前端社区
07/11
0
0
解密vue-router: 从源码开始

前几天笔者看到一个问题:你真的了解vue-router的吗?你知道vue-router的运行原理吗?抱着这样的问题,笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼
05/08
0
0
V.HSIAN/vue-component

vue component 在线文档 https://hsian.github.io/vc-dist/index.html#/component/button Install # 克隆仓库git clone https://github.com/hsian/vue-component.git cd vue-component and n......

V.HSIAN
07/09
0
0
Muse-UI 3.0.0-beta.1:所有组件重构,部分组件合并

Muse-UI 3.0.0 首个测试版发布: 所有组件重构,减小了整体包的体积 组件中增加了 和 属性,用于改变组件显示; 基于 vuejs 2.5 的 API,支持标签原生属性、事件(无需使用 监听, 另外部分属性...

王练
05/30
0
0
太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

前言 一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。 最近两年,太原作为一个准二线城市,各大互联网公司的技术栈也在...

闰土大叔
06/08
0
0
Vue命令行工具vue-cli

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可...

韦姣敏
06/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
26分钟前
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
43分钟前
4
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部