bootstrap+vue做一个简易的todolist

最新推荐文章于 2024-08-15 09:11:51 发布
最新推荐文章于 2024-08-15 09:11:51 发布
阅读量763 收藏
点赞数
分类专栏： vue 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>
mj_leona
关注
专栏目录
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 2113
一、初始化vite项目： 二、梳理项目结构： 1）重置index.css中的全局样式； 2）重置App.vue组件的代码结构 三、封装TodoList组件： 1）创建并注册TodoList组件 2）渲染列表组件（基于boorstrap) 1.在 main.js 入口文件中，导入 bootstrap.css 样式表。 2.在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中，为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明props 属性。 3
Project-TodoList-Bootstrap-jQuery
05-08
Project-TodoList-Bootstrap-jQuery 该项目是一个包含不同列表项和添加自定义任务的文本区域的网页。 这是一个非常用户友好和用户交互的项目，使用户的工作变得更加轻松。 用户可以使用“添加”按钮将对象添加到列表中。 使用“重置”按钮，用户可以重置任务，并且不会将其添加到列表中。 如果用户单击任何项​​目，则将其删除并标记为完成。 使用“排序”按钮，完成的任务进入底部，未完成的任务进入顶部。 “清除”按钮清除列表中所有已完成的任务。 当用户在任务栏上没有写任何东西时，所有按钮都将被禁用。
BootstrapVue 框架详解及实战指南
最新发布
gitblog_00659的博客
08-15 420
BootstrapVue 框架详解及实战指南 bootstrap-vue项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-vue 1. 项目介绍 BootstrapVue 是一个为 Vue.js 应用程序量身定制的、最全面的 Bootstrap v4 实现。它提供了大量的可复用 UI 组件，支持丰富的无障碍功能（WAI-ARIA），使开发者能够快...
基予bootstrap和vue实现To do list
08-30 97
先上效果图： 其中用到的知识点：有bootstrap和bootstrap.js,以及Vue的常用指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
【bootstrap+Vue编写todoList】
weixin_42160554的博客
10-26 266
&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
【2019/01/12】bootstrap+vue初体验
你好呀，欢迎你的到来。
01-12 3372
Bootstrap实际上也是一个库，主要通过标签的方式，美化界面，依赖Jquery。 此次按照网易云上的课程，做了一个裸HTML网页，实现TODOList界面，添加，删除等功能。 代码如下，原教程里存在两个地方错误，第一个地方就是$index的获取，第二个地方是在模态框里获取{{ nowIndex }}的值。 &lt;!DOCTYPE html&gt; &lt;html xmlns...
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
Vue2+Vue3（脚手架）
qq_47296476的博客
01-17 1608
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
Mac下用vue-cli+webpack+bootstrap实现一个todolist（二）
lily
11-22 571
vue
todolist
水滴石穿
11-28 708
1. phpunit      参考 http://phpunit.de/manual/current/zh_cn/phpunit-book.html     重点理解单元测试过程中的原理以及phpunit.xml.dist配置文件 2. 自动化测试框架 3. shell脚本基本知识，尤其是对文件的操作，svn的基本命令
BootstrapVueAdmin:基于bootstrap，vuejs框架的后台管理系统
03-11
BootstrapVueAdmin 基于bootstrap，vuejs框架的后台管理系统
基于vue2和bootstrap做的一个购物后台管理平台
08-12
基于vue2和bootstrap做的一个购物后台管理平台
Angularjs + Bootstrap 制作的一个TODO List
weixin_33851177的博客
08-12 136
看了一个关于Angularjs的视频，视频内容讲解的是如何制作一款TODO list形式的SPA（Simple Page Application,单页面应用)。为了增强理解，下面写了一篇文章，用以复习巩固。 准备 Angularjs下载 CDN加速 npm 方式 常规方式 Bootstrap下载 知识储备 M...
todolist未完成，已完成
hfyldx的博客
10-06 829
<!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 663
Vue+bootstrap+webpack搭建 第一步，使用vue-cli搭建项目 npm install -g vue-cli vue init webpack projectname cd projectname npm run dev 打开网址，运行成功的地址 如果看到熟悉的vue的图标，就说明已经搭建成功了 第二步，引入bootstrap 要使用bootstrap，首先要知道，他是基...
vue 集成bootstrap使用
haeasringnar的博客
11-27 2332
1、编辑webpack.base.conf.js文件 增加webpack： var webpack = require('webpack') 增加Jquery： plugins: [ new webpack.ProvidePlugin({ $: &quot;jquery&quot;, jQuery: &quot;jquery&quot; }) ], 修改后的文件： 'use strict'...
vue webpack引入Bootstrap编写demo测试可用
王维佳的专栏
05-21 372
1.什么是bootstrap？ Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包。利用 Bootstrap 提供的 Sass 变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。 2.怎么引入到webpack项目中达到可用状态？ step1:打...
Vue.js+BootStrap+.Net Core开发后台管理系统 初次接触学习记录（11-7）
Andri0519的博客
11-07 530
其实昨天就基本把Js，CSS都找到了并且也放到了项目之中但是昨天由于太晚了就没有记录下来 这个是基本的项目结构 然后也做了初具模型但是还没有功能的登录页面我会慢慢的来完善他的 对了引用了别人使用Bootstrap开发的后台模板~ 叫SB Admin (⊙o⊙)… 名字很奇怪但是好看 哈哈哈 上图登录页面的 不积跬步无以至千里~ 2017-11-7 转载于:ht...
用bootstrap+vue写一个侧边栏
03-08
好的，我可以回答这个问题。使用 Bootstrap Vue 可以轻松地创建一个侧边栏。首先，您需要在您的项目中安装 Bootstrap Vue。然后，您可以使用以下代码创建一个基本的侧边栏： ``` <template> <div> <b-sidebar id="sidebar" title="Sidebar"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </b-sidebar> <b-button @click="toggleSidebar">Toggle Sidebar</b-button> </div> </template> <script> import { BButton, BSidebar } from 'bootstrap-vue' export default { components: { BButton, BSidebar }, methods: { toggleSidebar () { this.$refs.sidebar.toggle() } } } </script> ``` 这将创建一个带有三个链接的侧边栏，并在页面上添加一个按钮，以便用户可以切换侧边栏的可见性。您可以根据需要自定义侧边栏的样式和内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值