使用Vue来制作简易的小例子（添加删除表）+bootstrap来做样式

最新推荐文章于 2019-08-12 14:21:14 发布
最新推荐文章于 2019-08-12 14:21:14 发布
阅读量270 收藏
点赞数
分类专栏： 随手记 Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37986384/article/details/82856626
版权

  展示图：

 

 

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简易留言板</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
     <script src="vue.js"></script>
    <style>

    </style>
    <script type="text/javascript">
        window.onload = function () {
            new Vue({
                el: "#box",
                data: {
                    mydata: [],
                    username: "",
                    age: "",
                    nowIndex: -100,
                    zizi:"确认全部删除么？"
                },
                methods: {
                    add: function () {
                        this.mydata.push({
                            name: this.username,
                            age: this.age,
                        });
                        this.username = "";
                        this.age = "";
                    },

                    deletemsg:function(n){
                        if (n==-2)
                        {
                            this.mydata = [];
                        }
                       else
                        {
                         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 class="form-group">
                <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="添加" class="btn btn-primary" v-on:click="add()" />
                 <input type="reset" value="重置" class="btn btn-danger" />
            </div>
        </form>
        <hr />
        <table class="table table-bordered table-hover">
            <caption class="h3 text-info" >用户信息表</caption>
            <tr class="text-danger">
                <th class="text-center">
                    序号
                </th>
                <th class="text-center" >
                    名字
                </th>
                <th  class="text-center">
                    年龄
                </th>
                <th  class="text-center">
                    操作
                </th>
            </tr>
            <tr class="text-center" v-for="item in mydata">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><input type="button" value="删除" v-on:click="nowIndex=$index" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"/></td>
            </tr>
          
            <tr v-show="mydata.length!=0">
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2"  data-toggle="modal" data-target="#layer">删除全部</button>
                </td>
            </tr>
             <tr v-show="mydata.length==0">
                <td colspan="4" class="text-center text-muted">
                    <p>暂无数据...........</p>
                </td>
            </tr>
        </table>

        <!--模态框 弹出框-->
        <div role="dialog" class="modal fade" id="layer" data-index="{{nowIndex}}">
            <div class="modal-dialog">
                <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal">
                           <span>&times;</span>
                       </button>
                       <h4 class="modal-title" id="title"> 确认删除么？</h4>
                   </div>
                    <div class="modal-body text-right">
                        <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                        <button type="button" v-on:click="deletemsg(nowIndex)" class="btn btn-danger btn-sm" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

明扬.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue简单入门案例——个人学习笔记-使用IDEA（非教程）
zcylxzyh的博客
07-26 2077
前言： 这是我的第二篇个人学习的心得体会，这篇主要记录了对vue的简单入门，让大家可以更加了解vue的强大之处，希望大家多多包涵，共同进步（这个不是教程哦，主要是个人的学习笔记~）。 1.Vue简介： Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于...
Vue简易案例二(指令)
weixin_34203832的博客
06-04 91
前端写特效的时候必须要保证DOM是加载完毕的，之前我用组件生命周期的update写，多有不便， 现发现自定义指令比较好，指令里面也是有周期，能做到相对的分离，案例奉上 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> ...
Vue2.0简易案例
weixin_33979745的博客
01-19 127
效果图： 使用微信或手机浏览器扫描二维码预览 在线地址：https://www.huzerui.com/vue2.0-demo 源码：https://github.com/alex1504/vue2.0-demo 说明： 2017.1.13 主导航电影、音乐、图书、图片使用router跳转电影模块使用tab菜单切换各个列表模块下...
vue简单示例.zip
03-25
vuejs的一些简单的入门demo案列,便于vue的入门学习 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue学习第一天——简单vue实例
地铁和人海
08-12 2361
实现简单的vue例子 很简单，不多说了。但在其中： 我们可以定义一个变量来new一个vue实例，也可以直接vue一个实例。 对于data数据，我们可以在data里面直接定义，也可以再vue外面var一个变量然后传进去如： 对于这种定义的变量（在vue外面定义），我们可以设置它不会被改变，就用Object.freeze(data)这个方法。如果你在vue的data里面定义变量还用这个方法，这个方法...
专栏：Vue3.0 + Typescript + axios + bootstrap +原始注释博客专栏作品
01-31
使用bootstrap进行css样式调整 使用TypeScript语法 使用初步思想开发 使用ESLint语法规范 使用Axios进行数据获取 使用vue-router进行路由重组 使用Vuex进行数据管理 代码中包含清晰注释，方便阅读 文章内容支持...
springboot+vue+bootstrap实现用户增删改查
12-19
在本项目中，"springboot+vue+bootstrap"的组合被用来实现一个基本的用户管理功能，包括用户信息的增加、删除、修改和查询。这是一个常见的Web应用开发场景，涉及后端服务处理与前端界面展示的协同工作。下面将详细...
使用Bootstrap + Vue.js实现添加删除数据示例
10-20
本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
基于SpringBoot+Vue+BootStrap的美食网站
06-16
分享一套拿来即用的计算机毕业设计源码，这是我刚刚帮学生做完的一个美食网站的毕业设计。网站运行地址： http://localhost:8888/front/index.html 账号/密码：admin/123456 后端采用SpringBoot + mysql，前端是Vue ...
WebCollector+SpringBoot+Vue+Bootstrap，简易通用式Web应用爬虫
10-18
利用WebCollector+SpringBoot+Vue+Bootstrap搭建的一个Web应用版的爬虫，可以应付多种直观可以见的页面爬取，通过http://localhost:8886/index.jsp即可访问，其中网站输入为爬取网站首页网址，其余分别填写CSS选择器...
使用Bootstrap和Vue实现用户信息的编辑删除功能
08-29
主要介绍了使用Bootstrap和Vue实现用户信息的编辑删除功能,需要的朋友可以参考下
bootstrap一个小案例
08-16
包括导航条，carousel，利用栅栏的三栏布局，导航的标签页以及模态框等
表单拖拽设计器bootstrap
05-31
表单拖拽设计器bootstrap，一个是对表单控件进行拖拽，另外一个是对整个表单进行拖拽
vue快速入门的三个小实例
weixin_34268843的博客
08-24 128
为什么80%的码农都做不了架构师？>>> ...
使用vue实现的品牌列表简单小例子
weixin_30588729的博客
01-30 290
直接贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
Vue+Bootstrap实现购物车程序（1）
weixin_30546189的博客
03-31 328
先看下案例效果：（简单的数量控制及价格运算） 代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>购物车</title> <!--rel 属性指示被链接的文档是一个样式表,说白了就...
Vue和Bootstrap的整合之路
weixin_33949359的博客
07-03 390
使用vue-cli如果是使用国内网络安装，官方建议使用淘宝或者cnpmjs的镜像。我感觉淘宝的镜像速度不如cnpmjs的快，因为我使用的cnpmjs镜像。npm--registryhttp://r.cnpmjs.orginstall--globalvue-cli//安装vue-clivueinitwebpack<projectname>//创...
springboot+mybatis+vuejs+bootstrap实现增删改
热门推荐
abgglive的博客
01-22 1万+
注明：使用的工具是IDEA 2017.3；Jdk为1.8版本。 首先第一步是要创建一个springBoot项目,用IDEA自带的生成器spring initializr ；看下图     （提示：这里在勾选完web后还要选中SQL在勾选其中的 MySQL，JDBC, Mybatis 然后点击下一步） 到这之后呢一个springboot项目就创建好了，然后我们第一要做的就是配置，先
vue+bootstrap 实现数据的增删改查
qq_42697338的博客
01-02 1266
需要自己吧vue这个文件引入，可以从bootcdn中导入 还需要把bootstrap这个文件的css导入 &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-sca
vue+bootstrap crud
最新发布
12-26
Vue Bootstrap CRUD是一种基于Vue框架和Bootstrap库的应用程序开发模式。CRUD代表着“创建(Create)、读取(Read)、更新(Update)、删除(Delete)”，是指在应用程序中对数据进行基本的操作。 在Vue Bootstrap CRUD中，我们可以利用Vue框架的数据绑定和组件化特性快速构建前端界面，同时使用Bootstrap库提供的样式和组件来美化页面。通过结合Vue和Bootstrap，我们可以创建一个功能完善、用户友好的管理界面，用于对数据库中的数据进行增删改查操作。 在Vue Bootstrap CRUD的开发中，我们可以利用Vue的组件化特性将CRUD的各个功能模块拆分成可复用的组件，以提高开发效率和代码可维护性。同时，可以利用Vue Router实现路由跳转和页面分发，使得用户能够流畅地进行数据操作。另外，还可以使用Vue Resource或者axios等Ajax库与后端进行数据交互，实现数据的获取和提交。 总的来说，Vue Bootstrap CRUD是一种结合了Vue框架和Bootstrap库的应用程序开发模式，可以快速构建具有CRUD功能的管理界面。它利用Vue的数据绑定和组件化特性以及Bootstrap的样式和组件，实现了简洁、美观、功能完善的用户界面，能够满足各种数据管理需求。同时，它也符合现代Web开发的趋势，提高了开发效率和用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值