简单的模态框vue+bootstrop

最新推荐文章于 2024-05-22 08:00:00 发布
最新推荐文章于 2024-05-22 08:00:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端 文章标签： vue bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_C_Language/article/details/82797329
版权 
记录一下,运用了bootstrap中的模态框来编写模拟数据的添加....主要技术:vue的的应用,和bootstrap框架的格式引用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <script src="../lib/jquery-3.3.1.js"></script>
    <script src="../lib/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    //这里的mydata只是一个容器
                    myData:[],
                    username:'',
                    age:'',
                    //索引的默认值,
                    nowIndex:-100
                },
                methods:{
                    add:function () {
                        //把数据存放在mydata中
                        this.myData.push({
                            name:this.username,
                            age:this.age
                        });
                        this.username='';
                        this.age='';
                    },
                    deletemsg:function (n) {
                        console.log(n);
                        //splice 添加/删除
                        this.myData.splice(n,1);
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container" id="box">
    <form role="form">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" v-model="username" class="form-control" placeholder="输入用户名">
        </div>
        <div>
            <label for="age">年 龄</label>
            <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">
        </div>
        <div class="form-group">
            <input type="button" value="添加" v-on:click="add()" class="btn btn-primary">
            <input type="reset" value="重置" class="btn btn-danger">
        </div>
    </form>
        <hr>
        <table class="table table-bordered">
            <caption class="h2 text-info text-center">用户信息表</caption>
            <tr class="text-danger table-hover">
                <th class="text-center">序号</th>
                <th class="text-center">名字</th>
                <th class="text-center">年龄</th>
                <th class="text-center">操作</th>
            </tr>
            <!--z在vue2.0中移除了{{$index}},改为了(value,index)-->
            <tr class="text-center" v-for="(value,index) in myData" >
                <td>{{index+1}}</td>
                <td>{{value.name}}</td>
                <td>{{value.age}}</td>
                <td>
                    <!--把循环里的 index值赋值给 data里的nowIndx-->
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">删除</button>
                </td>
            </tr>
            <!--判断显示  要是myData的长度不为0  就显示-->
            <tr v-show="myData.length!=0">
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm ">删除全部</button>
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="4" class="text-center text-muted">
                    <p>暂无数据...</p>
                </td>
            </tr>
        </table>
        <!--模态框  弹出框 bootstrap.js role="dialog":用于指定模态框为对话框 data的是bootstrap   fade:从上往下 -->
        <div role="dialog" class="modal fade" id="layer" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">

                        <h4 class="modal-title">确认删除吗</h4>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-right">
                        <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                        <button class="btn btn-danger btn-sm" v-on:click="deletemsg(nowIndex)" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
        </div>
</div>
</body>
</html>
我是个不努力的小菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap3 多个模态对话框无法显示的解决方案
12-11
今天帮同事调了一个代码，他们的项目最近在用Bootstrap做开发，突然间，他遇到了一个奇怪的问题，如果一个页面中，有多个Modal对话框的话，排列在第一个的对话框，能够正确显示，第二个，只能导致页面出现MASK层，却不能显示Dialog. 如果调整顺序，仍然是第一个能显示，第二个只有页面变暗。效果如下： 第一个，正常弹出的Dialog 第二个无法弹出，只是页面变暗的dialog 而两个dialog的代码是完全一致的，具体的代码如下： <div class="modal fade" id="mediaMsgDialog" tabindex="-1" role="dialog" aria
Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
看门猫的博客
01-08 5142
Boostrap前端框架学习（一）：Boostrap的安装及在Vue项目中的使用node.js的安装Boostrap的安装 node.js的安装 我们需要安装node.js，使用node.js的npm包管理器来完成Boostrap的安装。 前往Node.js中文网下载并安装node.js，安装程序会自动把node添加到环境变量，在安装完成后重启即可生效。 重启后在终端中输入以下命令查看node.j...
用Vue3.0 想实现一个 Modal组件（详细讲解）
最新发布
贫僧法号依平
05-22 1150
现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。
VUEJS项目实践五之Dialog弹出框MessageBox（超好看的bootstrap样式）
Yolanda_NuoNuo的专栏
03-16 4746
这次需要写一个弹出层dialog，有确认和取消按钮的那种。 先看下弹出层的效果吧～ 其实我是写成深黑透明底的，可能因为我在mac本上截的图，跟我在 windows里做出的效果不太一样，不过也是好看的。 一、src/components/messagebox下新建messagebox.js import messageBoxVue from './messageBox.vue' // 定义插件...
在Vue2中使用bootstrap模态框，激活时一闪而过
atregret的博客
04-15 429
模态框一闪而过
BootstrapVue中模态(modal)提示框的title标题居中方法及示例代码
weixin_52026996的博客
08-18 1912
本文主要介绍BootstrapVue(Bootstrap和Vue)中，设置模态(modal)提示框组件的title标题居中的方法，以及相关的示例代码。
Vue+bootstrap实现增删改查批量删除
05-25
在本项目中，“Vue+bootstrap实现增删改查批量删除”是一个使用Vue.js框架和Bootstrap样式库构建的简单数据管理应用。Vue.js是目前非常流行的前端JavaScript框架，它提供了组件化开发、响应式数据绑定等功能，使...
《Vue.js+BootstrapWeb开发案例教程（在线实训版）》案例源码Vue3版本.zip
06-29
在这些案例中，你将学习如何在Vue3项目中集成Bootstrap，创建各种交互元素，如导航栏、模态框、卡片等，并实现动态响应和自定义布局。 压缩包中的57752《Vue.js+Bootstrap Web开发案例教程（在线实训版）》案例源码...
【毕业设计】基于vue+BootstrapVue的在线it培训视频网站（前端源码）.zip
04-15
BootstrapVue为Vue.js带来了完整的Bootstrap 4组件库，包括导航栏、卡片、表格、模态框、下拉菜单等。这些组件都经过优化，能够与Vue.js的数据绑定和事件处理机制无缝集成。通过使用BootstrapVue，开发者可以轻松地...
springboot+bootstrap博客系统源码
12-10
2. **组件**：包括导航条、模态框、下拉菜单、轮播图等，都是可复用的UI元素。 3. **JavaScript插件**：Bootstrap包含一些基于jQuery的插件，如模态、滚动监听和轮播。 4. **响应式设计**：Bootstrap采用媒体查询...
vue3-bootstrap5-modal:使用Bootstrap 5的简单vue 3模态组件
04-04
＃vue3-bootstrap-5-modal-component使用引导程序5的vue 3的简单模态组件 依存关系： 该组件需要安装Bootstrap 5和Popper npm install bootstrap@next npm install @popperjs/core 然后可以将它们包含在main.js...
vue-bootstrap-modal：可重用的bootstrap-modal Vue组件，用于简单模式
02-09
VUE BOOTSTRAP莫代尔 Vue Bootstrap Modal是一个可重用的组件，您可以在需要显示简单的模式弹出窗口时在整个项目中使用。 因此，您不必每次都想使用引导程序模式时重复相同的html代码。 目录 开始吧 安装 npm install --save @andresouzaabreu/vue-bootstrap-modal 建立 import BootstrapModal from '@andresouzaabreu/vue-bootstrap-modal' // register it globally with whatever name you want Vue . component ( 'bs-modal' , BootstrapModal ) 使用范例 < button class =" btn btn-primary " @click =" (showFor
bootstrap如何用js调用模态框_如何在Vuejs中实现页面空闲超时检测
weixin_39634022的博客
12-12 207
您是否需要检查用户在Vue应用程序中的不活跃状态？如果用户在一段时间内处于非活动状态，则要自动注销该用户或显示一个计时器。通常，具有机密数据的系统(如银行)通常会实现这种功能。需求是监听3秒钟的不活动状态并显示带有10秒计时器的模态提示框。如果在10秒的会话中没有任何操作，请自动注销用户。需求要在Vue应用程序中监听3秒钟的不活动状态，并显示带有10秒计时器的模态提示框。如果在10秒的会话中没有任...
用原生js监听vue里调用的bootstrap模态框
qq_42345237的博客
01-20 1250
因为是MVC的项目，所以虽然用了vue，但不是我们平常写的SPA，而是在页面中去单独引用。 那么当我们在vue中去调用bootstrap中的模态框时，怎么去监听模态框的显示和隐藏呢？ 首先，对于bootstrap中的模态框显示隐藏的监听，bootstrap本身是有一套方法的。 事件类型 描述 show.bs.modal show方法调用之后立即触发该方法。如果是通过点击某个作为触发...
vue组件实现表格增删改功能+模态框+bootstrap
qq_40994735的博客
09-02 1142
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js-css/js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js-css/js/jquery.min.js" typ
[HTML+Bootstrap+CSS+Vue.js] 利用v-for循环、modal模态框、datetime控件添加起止时间记录，要求简单验证输入的时间格式
shawxlee的CSDN博客
11-12 1731
•需求：点击按钮弹出模态框，用户输入数据并点击提交，若输入格式正确，则添加一条记录到页面并关闭模态框；若输入格式有误，则模态框不关闭，且显示警告文字，用户重新输入时消失 •美化：从左到右排列记录，间距适当，队列末尾放置+号按钮，并添加浅色虚线背景框，弹出的模态框居中显示 •技术：HTML + CSS + Vue.js + Bootstrap + jQuery
做一个vue模态弹出框如何
u011927449的博客
05-25 976
运用的知识点包括： 路由的配置 插槽 vue的过渡动画 路由重定向 router/index.js里面配置路由 import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/home' import About from '@/components/about' Vue.use(Router) export default new Router({ mode:'history...
Bootstrap触发模态弹出窗的2种方法
实践求真知
02-04 1322
一 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;模态弹出窗的使用&lt;/title&gt; &lt;link rel=&q
Bootstrap弹出模态框
qq_44883796的博客
09-28 836
弹出模态框 (Modal) 使用Bootstrap的JavaScript模态框插件可以为您的网站添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互（如考试问答场景-译者注） 运行原理 在开始使用Bootstrap模态框组件前，请务必阅读以下内容，因为我们的菜单选项最近有新的更改迭代。 弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从中删除滚动事件，以便模态框自身的内容能得到滚动。 点击模态框的“backdrop”（灰背景区域），将自动关闭
vue3 使用bootstrap框架
03-21
Vue 3是一种流行的JavaScript框架，用于构建用户界面。它具有响应式数据绑定和组件化的特性，使得开发者可以更轻松地构建交互式的Web应用程序。Bootstrap是一个流行的CSS框架，提供了一套现成的样式和组件，可以帮助开发者快速构建美观的网页界面。 要在Vue 3中使用Bootstrap框架，你可以按照以下步骤进行操作： 1. 首先，你需要在你的Vue项目中安装Bootstrap。可以通过npm或者yarn来安装Bootstrap的最新版本。在终端中运行以下命令： ``` npm install bootstrap ``` 或者 ``` yarn add bootstrap ``` 2. 安装完成后，在你的Vue组件中引入Bootstrap的CSS文件。你可以在`main.js`文件中添加以下代码： ```javascript import 'bootstrap/dist/css/bootstrap.css' ``` 3. 接下来，你可以在你的Vue组件中使用Bootstrap提供的样式和组件。例如，你可以在模板中使用Bootstrap的类名来应用样式，或者使用Bootstrap的组件来构建界面。 4. 如果你想使用Bootstrap的JavaScript组件（如模态框、轮播图等），你还需要引入Bootstrap的JavaScript文件。你可以在`main.js`文件中添加以下代码： ```javascript import 'bootstrap/dist/js/bootstrap.js' ``` 这样，你就可以在Vue 3项目中使用Bootstrap框架了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值