Vue 2.0 + bootstarp的demo

最新推荐文章于 2022-10-04 10:37:52 发布
最新推荐文章于 2022-10-04 10:37:52 发布
阅读量427 收藏
点赞数
分类专栏： vue 从入门到放弃
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35776392/article/details/78322780
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        tr{
            vertical-align: inherit;
        }
    </style>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <script>
        window.οnlοad= function(){
            var vm = new Vue({
                el:'#container',
                data:{
                    myData:[],
                    username:'',
                    age:''
                },
                methods:{
                    add:function(){
                        this.myData.push({
                            name:this.username,
                            age:this.age
                        });
                        this.username="";
                        this.age="";
                    },
                    reset:function(){
                        this.username="";
                        this.age="";
                    },
                    del:function(index){
                        this.myData.splice(index,1)
                    },
                    delAll:function(){
                        this.myData=[];
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="container">
        <form role="form">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input placeholder="输入用户名" type="text"
                       v-model="username"
                       id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="age">年龄：</label>
                <input placeholder="输入年龄" type="text"
                       v-model="age"
                       id="age" class="form-control">
            </div>
            <div class="form-group">
                <input type="button" class="btn btn-info" v-on:click="add()" value="添加">
                <input type="button" class="btn btn-info" v-on:click="reset()" value="重置">
            </div>
        </form>
        <hr>
        <table class="table table-bordered table-hover">
            <caption>用户信息表</caption>
            <tr class="text-danger">
                <td class="text-center">序号</td>
                <td class="text-center">名字</td>
                <td class="text-center">年龄</td>
                <td class="text-center">操作</td>
            </tr>
            <tr v-for="(item,index) in myData">
                <td class="text-center">{{index+1}}</td>
                <td class="text-center">{{item.name}}</td>
                <td class="text-center">{{item.age}}</td>
                <td class="text-center">
                    <button class="btn btn-danger btn-sm"
                        v-on:click="del(index)"
                        data-toggle="dialog" data-target="#layer"
                    >删除</button>
                </td>
            </tr>
            <tr v-show="myData.length!=0">
                <td colspan="4" class="text-right">
                    <button v-on:click="delAll()" class="btn btn-danger btn-sm">删除全部</button>
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="4" class="text-center">
                    <p>暂无数据</p>
                </td>
            </tr>
        </table>
    </div>


</body>
</html>

嘿丷如歌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 基础bootstrap开发demo
weixin_30414155的博客
04-14 529
周末无聊，看着视频和文档敲得，不喜勿喷呦^^ 文档：http://www.runoob.com/bootstrap/bootstrap-intro.html 废话不说看效果： 配置： vue组件引入jqueryhttps://www.cnblogs.com/aoshuang/p/10685633.htmlvue引入bootstraphttps://www.cnblogs.com/aos...
详解JavaScript数据类型之隐式类型转换
weixin_30294709的博客
01-12 141
详解JavaScript数据类型之隐式类型转换 JavaScript的数据类型分为六种，分别为null,undefined,boolean,string,number,object。object是引用类型，其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型，叫做类型转换，类型转...
vue2.0+bootstrap实战（一）
weixin_34185364的博客
01-09 2324
俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下Vue2.0,想做个项目练下手，顺便写个文章方便复习回顾~ 1.使用cue-cli创建vue项目 进入指定目录，右击Git Bash Here打开git命令行，vue init webpack 项目名称，创建基于webpack的vue项目 根据命令行的提示，选择是否安装vue-ro...
基于Bootstrap模板创建门户网站vue项目01
u013032479的博客
02-22 5544
基于静态的html模板转为vue项目
BootstrapVue 入门
分享身边生活经验blog
10-04 9301
编者注 ：本文于 2022 年 9 月 2 日更新，包含有关 BootstrapVue 的优势、BootstrapVue 和 Bootstrap 之间的差异的信息，并对代码进行一般更新。Vue.js 是一个流行的 JavaScript 库，用于在短时间内开发原型。这包括用户界面、前端应用程序、静态网页和本机移动应用程序。它以其易于使用的语法和简单的数据绑定功能而闻名。最近，Vue.js 生态系统中发布了一个新包。
vue-cli-multipage-bootstrap：具有vue2 + vue-router + vuex + bootstrap + markdown的vue-cli-multipage-bootstrap演示，用于学习vue2.0
01-31
一个带有Bootstrap的Vue.js2.0项目，该项目将vue官方在线示例集成到组件中，并且对任何感兴趣的人自己构建一些组件。 组件 开发环境 npm install npm run dev 初始访问路径： 官方演示：...
vue2.0数据双向绑定与表单bootstrap+vue组件
01-19
最近一直在用vue，觉得确实是好用。...demo1</title> </head> <body> {{ name }} <input type=text v-model=name> </body> [removed][removed] [removed] new Vue({
web_demo_2.0.31
01-25
5. 前端框架：为了提高开发效率和代码复用，许多Web项目会使用前端框架，如Bootstrap、React或Vue.js。通过分析文件结构，我们可以确定Web_demo是否使用了特定的框架，并学习其用法。 6. 后端技术：如果Web_demo...
CoPilot：基于AdminLTE和vue.js的自适应Bootstrap 3管理模板
02-02
该项目正在使用VueJS 2.0！ 早期版本可以在下找到。 我还建议您为Chrome安装vue-devtools，以便可以轻松检查该vue状态。 提取的数据使用faker.js使其动态化。 这是出于演示目的。 查找demo。*以获取动态生成的信息...
test-DTCenter网页Demo
04-26
1. **Web开发框架**：为了构建这样一个网页应用，开发人员通常会选用一种Web开发框架，如React、Vue.js或Angular。这些框架提供了一套完整的工具和结构，简化了网页开发过程，提高了效率。 2. **前后端分离**：...
vue与bootstrap实现时间选择器的示例代码
08-29
本篇文章主要介绍了vue与bootstrap实现时间选择器的示例代码，非常具有实用价值，需要的朋友可以参考下
vue 2.0写的一个小demo
12-19
项demo中基本用到所有Vue的基本功能,比如,双向绑定,渲染列表,数据绑定,组件,自定义指令,消息传递,条件渲染等,运行方法见 readme
bootstrap 开源框架demo_9个优秀的 VUE 开源项目
weixin_39993454的博客
11-25 1870
作者：前端瓶子君转发链接：https://mp.weixin.qq.com/s/W8Fvn1ubcKwjo-C7LQvU7w前言Vue 结合了 React 和 Angular 的优点，并且有着团结、活跃且庞大的社区，可以帮助解决开发中遇到的问题。开源社区不断提出解决问题的新方法。工具和库的数量也贡献量不断的增加。使用 Vue 的好处该框架非常小。约为18–21KB；Vue 支持用基于组件的方法来构...
Vuejs2.0 + bootstrap demo
weixin_33725270的博客
05-07 209
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet&qu
在vue3 中安装使用bootstrap
Mr. Ding的小博客
11-17 6432
在 vue 项目中引入 bootstrap，首先要引入两个依赖：jQuery 和 popper 第一步、安装 1、npm安装 安装命令如下： cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev 默认安装最新版本，如果想要安装 bootstrap 的 V3 版本（依赖 less），可以： 或者，采用可视化窗口安装 2、可视化窗口安装 1、找.
uniapp + bootstrapvue 移动/PC 一套搞定 （一）配置bootstrapvue
chiying9447的博客
07-24 7208
1.准备文件 自己到DCloud官网： http://dcloud.io/ 去下载官方的IDE Hbuilder，新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件： bootstrap.min.css //bootstrap 4 以上。h...
vue+bootstarp实现留言板效果
maolian1995的博客
01-05 867
vue+bootstarp留言板 用户名： 年龄：   用户信息表 序号 名字 年龄 操作 {{index}} {{item.name}} {{item.age}} 删除 全部删除 暂无数据...
vue bootstrap区别
热门推荐
lin123_00的博客
04-25 1万+
　在很多人眼里bootstrap和vue都是前端框架，其实他们还是有很多区别的，bootstrap是前端页面框架，用于快速开发响应式页面，而vue是前端js库，把前端开发组件化。 我的web前端学习交流群点击进入1045267283，欢迎加入！ BootStrap: 　　特点是栅格系统, 使用简单, 上手容易. 专为响应式页面而生. 一套代码就可以自适应平板电脑和PC. 　　缺点在于, 缺...
bootstrap+vue=动态添加删除用户数据
xiaowei的博客
05-08 2147
首先使用bootstrap进行页面布局，使用vue进行数据绑定，可实现添加、删除、全部删除。全部删除、“暂无数据”根据有无数据动态显示隐藏，这是vue的机制，做起来很方便。<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styles
vue2.0+ts 后台模板
最新发布
10-01
Vue2.0是一款流行的JavaScript框架，用于构建用户界面。它具有良好的模块化和组件化特性，使开发人员能够更高效地开发可重用的前端代码。 而TypeScript（简称TS）则是一种由微软开发的开源编程语言，它是JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值