基予bootstrap和vue实现To do list

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量97 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/1031097/blog/1526041
版权

先上效果图：

 

其中用到的知识点：有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>

 

转载于:https://my.oschina.net/u/1031097/blog/1526041

chengsu1902
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue基于bootstrap的todolist
jianggeye7485的博客
08-20 365
一、main.js引入bootstrap。 import { createApp } from 'vue' import App from './App.vue' import './assets/css/bootstrap.css' import './index.css' createApp(App).mount('#app') 二、TodoList.vue组件 <template> <ul class="list-group"> <!-- 列表框--...
Vue实现TodoList任务列表案例
m0_57101855的博客
05-28 2106
一、初始化vite项目： 二、梳理项目结构： 1）重置index.css中的全局样式； 2）重置App.vue组件的代码结构 三、封装TodoList组件： 1）创建并注册TodoList组件 2）渲染列表组件（基于boorstrap) 1.在 main.js 入口文件中，导入 bootstrap.css 样式表。 2.在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中，为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明props 属性。 3
bootstrap+vue做一个简易的todolist
mj_leona的博客
05-25 758
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" href="http:
Simple-To-Do-List:简单的待办事项清单
05-18
简单的待办事项清单 使用Bootstrap轻松对待办事项列表做出React 将鼠标悬停在待办事项上，然后点击x将其删除。 添加新的待办事项并稍后返回，该列表将保存在本地存储中。 npm install npm run build npm run start
Vue非典型封装Bootstrap-Select公共组件（异步获取数据，prop自定义函数）
weixin_39681181的博客
04-11 2720
本文重点讨论的问题： 1. 如何统一所有实例数据，而不是实例化组件时传入数据。并非提倡这种做法，结合实际需求。 2. 如何prop组件实例的自定义函数。 以上问题比较鲜见，于是把我的解决思路写下来跟各位分享。完整具体的实现代码就不列出了。 接触VUE时间不长，逐渐了解到它的强大组件功能后，就开始着手将项目中的可以复用的选择框封装成公共组件。 开始的选择并非是Bootstrap-sele...
使用Bootstrap-Vue将Bootstrap与Vue.js集成
culi4814的博客
09-02 2308
In this article, we’ll explore how to integrate Bootstrap with Vue.js using Bootstrap-Vue. 在本文中，我们将探讨如何使用Bootstrap-Vue将Bootstrap与Vue.js集成。 React and Vue.js are two leading, modern JavaScript framewo...
vue实现留言板todolist功能
12-12
通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"&...
my-to-do-list.html
07-07
本案例是本人基于bootstrap和vue开发的一个to-do-list小案例，可以实现任务的删除，添加，任务列表的切换等基本功能。
Bootstrap框架—-多条记录多文本(List)添加
直到世界的尽头
03-27 3100
我们在上篇文章中已经记录了多条记录双文本(List)添加的后台功能交互 Bootstrap框架—-多条记录双文本(List)添加 本章来实现多文本的多条记录录入，传给后台保存成List的结构。 界面交互设计如图: 可动态添加行数，每行多个文本录入。 我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架。 应用bootstrap模板 基础项目...
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 1035
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
JavaScript代码片段
weixin_66128399的博客
08-26 1793
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
【项目】云备份系统笔记
m0_73713491的博客
08-27 958
就包含一个类，config，是读取配置文件的类，因为配置文件只有一份，所以可以采用单例模式，把config类的构造函数私有化，只能通过一个公共成员函数getinstance（）来创建对象（new config（）），在类的内部可以调用私有化构造函数，构造函数里面再调用读取配置文件的函数，用自己实现的工具类读取配置文件，将读到的内容放到一个字符串中，然后再将字符串用Json进行序列化，然后给类中的成员变量进行赋值，类中的成员变量就包含了cloud.conf里面包含的信息，一一对应。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 7666
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1560
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 531
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue ref和reactive区别
灰海
08-25 3464
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 533
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
JavaWeb——前端工程化
m0_50460160的博客
08-30 365
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
layui栅格布局设置列间距不起作用
gc_2299的博客
08-26 904
记录layui栅格布局设置列间距不起作用的解决办法
Bootstrap 和 VUE
08-15
Bootstrap和Vue是两个流行的前端开发工具和技术框架。 **Bootstrap**: Bootstrap是一个开源的前端框架，由Twitter开发，旨在简化Web应用程序和网站的设计和开发过程。它提供了一系列预定义的样式、组件和网格系统，使得开发者能够快速构建响应式、移动优先的界面。Bootstrap包含HTML、CSS和JavaScript的基础元素，如导航栏、按钮、表单、模态框等，并且具有良好的可定制性和跨浏览器兼容性。 **Vue.js**: Vue.js（也称为Vue）是一款轻量级的渐进式JavaScript框架，专注于视图层的构建。它的核心理念是“尽可能地将DOM操作交由声明式的模板进行”，这使得开发人员能够更容易地描述数据是如何与UI交互的。Vue.js支持组件化开发，允许开发者复用和组合代码，同时提供了指令、过滤器和响应式的数据绑定等功能，便于创建动态的单页应用或复杂的Web应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值