Vue 2.0 + bootstarp的demo

最新推荐文章于 2022-02-28 09:47:17 发布
最新推荐文章于 2022-02-28 09:47:17 发布
阅读量413 收藏
点赞数
分类专栏： 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
    评论
专栏目录
springboot-mybatis-shiro + vue-bootstrap权限管理demo
12-27
前后端分离的权限管理综合demo，包含技术点：springboot、mybatis（使用tkmapper）、shiro、vue、bootstrap、axios、sweetalert、webpack
vue 基础bootstrap开发demo
weixin_30414155的博客
04-14 521
周末无聊，看着视频和文档敲得，不喜勿喷呦^^ 文档：http://www.runoob.com/bootstrap/bootstrap-intro.html 废话不说看效果： 配置： vue组件引入jqueryhttps://www.cnblogs.com/aoshuang/p/10685633.htmlvue引入bootstraphttps://www.cnblogs.com/aos...
13个优秀的 Vue 开源项目及合集推荐
热门推荐
前端开发博客
09-22 2万+
翻到文末推荐一个合集，点击阅读原文直达Vue 结合了 React 和 Angular 的优点，并且有着团结、活跃且庞大的社区，可以帮助解决开发中遇到的问题。开源社区不断提出解决问题的新方...
详解JavaScript数据类型之隐式类型转换
weixin_30294709的博客
01-12 135
详解JavaScript数据类型之隐式类型转换 JavaScript的数据类型分为六种，分别为null,undefined,boolean,string,number,object。object是引用类型，其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型，叫做类型转换，类型转...
bootstrap登录页面_Vue+Spring Boot简单用户登录Demo实现
weixin_39611008的博客
11-13 540
❝「如果觉得文章好看，欢迎点赞。」「同时欢迎关注微信公众号：氷泠之路。」❞这是一个前后端分离的简单用户登录Demo。技术栈VueBootstrapVueKotlinSpring BootMyBatis Plus前端创建工程使用vue-cli创建，没安装的可以先安装：sudocnpminstall-gvue@vue/cli查看版本：vue-V出现版本就安装成功了。创建初始工程：...
前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）
weixin_43507682的博客
02-09 1066
具体的操作流程（实现步骤）： 1.歌曲搜索 2.歌曲播放 3.歌曲评论 4.播放歌曲的MV（有的歌曲没有MV） 代码编写过程： 1.创建一个Vue项目（前提是安装好了node.js、npm、vue） 使用npm install命令，安装命令：npm install -g @vue/cli vue create 项目的名称（最好是全英文） ...
Vue2.0+ThreeJs写的一个3D粮仓管理系统源码.zip
05-08
Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。 Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了...
Vue2.0+ElementUI实现的校园疫情防控管理系统
06-22
项目采用MySql数据库，已实现基本需求，管理员、老师、学生、访客等 ...Echart图表是直接调用接口获取数据，想要显示需要进行联网 只有最基本功能，适用于大学期末或在此基础上增加合适功能模块完善项目使其成为大学...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
10-20
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
基于VueVuexBootstrap的blogdemo
08-09
基于 Vue Vuex Bootstrap 的blog demo
vue2.0+element+vuex纯前端管理平台
11-26
vue2.0+element+vuex纯前端管理平台，大家可以下载下来学习 前端开发工具：Visual Studio Code 工具:nodejs npm(可以安装淘宝镜像cnpm速度快，npm有时候依赖包下载不下来) 1 cnpm install 2 cnpm run dev
快速搭建vue2.0+boostrap项目
weixin_30528371的博客
11-06 111
一、Vue CLI初始化Vue项目 全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my-project 进入项目目录试运行 npm run dev 二、将BootStrap加入到Vue项目中 安装JQuery(因为Boostrap是依赖于JQuery的)npm in...
基于Bootstrap模板创建门户网站vue项目02
u013032479的博客
02-28 1608
基于静态的html模板转为vue项目
vue2.x利用脚手架快速构建项目并引入bootstrap、jquery
weixin_33753003的博客
12-06 166
要使用vue-cli脚手架搭建项目，首先需要安装node.js Node.js官网：https://nodejs.org/en/download/ 选择你对应的系统即可下载，下载完成后傻瓜式安装即可。 安装完成之后打开cmd，输入node -v 出现版本号即安装成功 接下来便可使用脚手架快速构建你的项目了： npm install -g vue-cli ...
vue2.0+bootstrap实战（一）
weixin_34185364的博客
01-09 2312
俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下Vue2.0,想做个项目练下手，顺便写个文章方便复习回顾~ 1.使用cue-cli创建vue项目 进入指定目录，右击Git Bash Here打开git命令行，vue init webpack 项目名称，创建基于webpack的vue项目 根据命令行的提示，选择是否安装vue-ro...
基于Bootstrap模板创建门户网站vue项目01
u013032479的博客
02-22 5260
基于静态的html模板转为vue项目
Vue 合同模板_Vue+BootStrapV4，构建响应式、移动优先项目——BootstrapVue
weixin_39789327的博客
10-27 585
介绍BootStrap是世界上最受欢迎的构建响应式移动优先网站的框架，Vue是当前最流行的前端框架之一，BootstrapVue则是将两者相结合，使用BootstrapVue，可以使用Vue.js和前端CSS库--Bootstrap v4在Web上构建响应式，移动优先项目。BootstrapVue具有超过40个插件和超过75个自定义组件，为Vue.js提供了最全面的Bootstrap v4组件和网...
vue2.0+ts 后台模板
最新发布
10-01
Vue2.0是一款流行的JavaScript框架，用于构建用户界面。它具有良好的模块化和组件化特性，使开发人员能够更高效地开发可重用的前端代码。 而TypeScript（简称TS）则是一种由微软开发的开源编程语言，它是JavaScript的超集，为JavaScript添加了静态类型检查和更强大的开发工具支持。使用TS可以提高代码的可维护性和可读性。 后台模板是指在后端开发中，为了快速搭建项目的界面和功能，开发人员可以使用现有的模板来减少重复劳动。后台模板通常包含了常见的界面组件和功能，如登录页面、仪表盘、表格、图表等，开发人员只需要在此基础上进行定制化开发即可。 基于Vue2.0和TS的后台模板提供了一种快速开发后台管理系统的解决方案。它结合了Vue2.0的响应式特性和组件化开发方式，以及TS的类型检查和开发工具支持，使开发人员能够高效地构建复杂的后台界面和功能。 使用Vue2.0和TS开发后台模板具有以下好处： 1. 更高的代码可维护性和可读性，TS的静态类型检查可以帮助开发人员及时发现潜在的 bug，提早进行修复。 2. 开发效率更高，Vue2.0的组件化开发方式和TS的开发工具支持可以减少代码量和重复代码，提高开发效率。 3. 提供了丰富的UI组件和功能模块，如表格、图表、表单验证等，可以快速构建出功能完善的后台管理系统。 4. 可扩展性强，Vue2.0的模块化开发方式和TS的模块化功能可以方便地引入第三方库和插件，满足不同项目的需求。 总之，基于Vue2.0和TS的后台模板是一种理想的解决方案，它结合了Vue2.0和TS的优点，能够帮助开发人员快速构建高质量的后台管理系统。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值