bootstrap+vue做一个简易的todolist

最新推荐文章于 2025-02-27 11:48:41 发布
最新推荐文章于 2025-02-27 11:48:41 发布
阅读量808 收藏
点赞数
分类专栏： vue 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mj_leona/article/details/80454557
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el:"#box",
                data:{
                    myData:[],
                    username:'',
                    userage:'',
                    nowIndex:-10
                },
                methods:{
                    add:function () {
                        this.myData.push({name:this.username,age:this.userage});
                        this.username = '';
                        this.userage = '';
                    },
                    deleteMsg:function () {
                        if(this.nowIndex==-2){
                            this.myData = [];
                        }else{
                            this.myData.splice(this.nowIndex,1);
                        }
                    },
                    change:function () {
                        if(this.nowIndex==-2){
                            document.getElementById("body_content").innerHTML = "确认删除全部用户信息吗？"
                        }else{
                            document.getElementById("body_content").innerHTML = "确认删除本条用户信息吗？"
                        }
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div class="container" id="box">
        <form role="form">
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" class="form-control" placeholder="请输入名字" v-model="username">
            </div>
            <div class="form-group">
                <label>年 龄：</label>
                <input type="text" class="form-control" placeholder="请输入年龄" v-model="userage">
            </div>
            <div class="form-group">
                <input type="button" value="提交" class="btn btn-primary" @click="add()">
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </form>

        <table class="table text-center table-bordered table-hover" style="margin-top: 100px">
            <caption class="h4 text-center">用户信息表</caption>
            <thead>
                <tr class="text-danger">
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in myData">
                    <td>{{i+1}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.age}}</td>
                    <td>
                        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" @click="nowIndex=i;change()">删除</button>
                    </td>
                </tr>

                <tr class="text-center" v-show="myData.length!=0">
                    <td colspan="4"><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal" @click="nowIndex=-2;change()">全部删除</button></td>
                </tr>
                <tr class="text-center" v-show="myData.length==0">
                    <td colspan="4" class="text-muted">暂无数据...</button></td>
                </tr>
            </tbody>
        </table>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" 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">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">删除用户</h4>
                    </div>
                    <div class="modal-body" id="body_content">确认删除吗？</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="deleteMsg()">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</body>
</html>
vue基于bootstrap的todolist
jianggeye7485的博客
08-20 393
一、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"> <!-- 列表框--...
【2019/01/12】bootstrap+vue初体验
你好呀，欢迎你的到来。
01-12 3398
Bootstrap实际上也是一个库，主要通过标签的方式，美化界面，依赖Jquery。 此次按照网易云上的课程，做了一个裸HTML网页，实现TODOList界面，添加，删除等功能。 代码如下，原教程里存在两个地方错误，第一个地方就是$index的获取，第二个地方是在模态框里获取{{ nowIndex }}的值。 &lt;!DOCTYPE html&gt; &lt;html xmlns...
Project-TodoList-Bootstrap-jQuery
05-08
Project-TodoList-Bootstrap-jQuery 该项目是一个包含不同列表项和添加自定义任务的文本区域的网页。 这是一个非常用户友好和用户交互的项目，使用户的工作变得更加轻松。 用户可以使用“添加”按钮将对象添加到列表中。 使用“重置”按钮，用户可以重置任务，并且不会将其添加到列表中。 如果用户单击任何项​​目，则将其删除并标记为完成。 使用“排序”按钮，完成的任务进入底部，未完成的任务进入顶部。 “清除”按钮清除列表中所有已完成的任务。 当用户在任务栏上没有写任何东西时，所有按钮都将被禁用。
Vue中引入bootstrap框架
最新发布
qq_62893228的博客
02-27 1126
所谓cdn引入，本人理解是在当前界面中引用远程服务器中的bootstrap文件夹中的css/js文件，那么在第一次加载的时候会非常慢，因为它依赖于网络速度去下载文件，然而第二次运行界面的时候加载非常的快，即使是断网也可以引用，这说明从远程服务器中只需要加载一次bootstrap的文件即可使用。
附录6-todolist案例，bootstrap
potato123232的博客
06-16 178
使用到了bootstrap，首先 npm install bootstrap进行安装，安装后导入css与js。上中下是三个组件，依次是 todo_input，todo_list与todo_button。todo_button用的是Components中的Button group。todoinput的样式使用的是 Forms 中的 Input group。todo_list使用的是Components中的List group。可以添加新任务，改变任务状态，与筛选任务列表。使用vant创建的项目。
基予bootstrap和vue实现To do list
08-30 113
先上效果图： 其中用到的知识点：有bootstrap和bootstrap.js,以及Vue的常用指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
【bootstrap+Vue编写todoList】
weixin_42160554的博客
10-26 286
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js" &gt;&am
Vue2+Vue3（脚手架）
娜的博客
01-17 1861
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
Vue实现TodoList任务列表案例
m0_57101855的博客
05-28 2209
一、初始化vite项目： 二、梳理项目结构： 1）重置index.css中的全局样式； 2）重置App.vue组件的代码结构 三、封装TodoList组件： 1）创建并注册TodoList组件 2）渲染列表组件（基于boorstrap) 1.在 main.js 入口文件中，导入 bootstrap.css 样式表。 2.在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中，为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明props 属性。 3
Vue-todolist
02-14
BootstrapVue Vue字体 ビルド # install dependencies npm install # serve with hot reload at localhost:8080 npm run serve # Lints and fixes files npm run lint # create production files npm run build # ...
BootstrapVueAdmin:基于bootstrap，vuejs框架的后台管理系统
03-11
BootstrapVueAdmin 基于bootstrap，vuejs框架的后台管理系统
基于vue2和bootstrap做的一个购物后台管理平台
08-12
基于vue2和bootstrap做的一个购物后台管理平台
Python-这个项目是基于flask和bootstrap实现的一个网页todo应用
08-10
这个项目是基于flask和bootstrap实现的一个网页todo应用
Mac下用vue-cli+webpack+bootstrap实现一个todolist（二）
lily
11-22 608
vue
todolist
水滴石穿
11-28 733
1. phpunit      参考 http://phpunit.de/manual/current/zh_cn/phpunit-book.html     重点理解单元测试过程中的原理以及phpunit.xml.dist配置文件 2. 自动化测试框架 3. shell脚本基本知识，尤其是对文件的操作，svn的基本命令
Angularjs + Bootstrap 制作的一个TODO List
weixin_33851177的博客
08-12 178
看了一个关于Angularjs的视频，视频内容讲解的是如何制作一款TODO list形式的SPA（Simple Page Application,单页面应用)。为了增强理解，下面写了一篇文章，用以复习巩固。 准备 Angularjs下载 CDN加速 npm 方式 常规方式 Bootstrap下载 知识储备 M...
todolist未完成，已完成
hfyldx的博客
10-06 859
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>storage</title> </head> <body> <input type="text" required id="inp...
vue + bootstrap + webpack
weixin_43062742的博客
09-21 695
Vue+bootstrap+webpack搭建 第一步，使用vue-cli搭建项目 npm install -g vue-cli vue init webpack projectname cd projectname npm run dev 打开网址，运行成功的地址 如果看到熟悉的vue的图标，就说明已经搭建成功了 第二步，引入bootstrap 要使用bootstrap，首先要知道，他是基...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值