一.

效果如下图所示，输入用户名和年龄，点击添加，数据会自动添加到下面的用户信息表内。当没有数据时，用户信息表显示：暂无数据……，当有数据时，显示 删除全部 按钮，这里为了方便快捷，我没有做删除按钮的弹出框，所以 点击删除按钮 会直接删除掉当前这条数据。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div class="container" id="box">

        <form role="form">

            <div class="form-group">

                <label for="username">用户名：</label>

                <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username" />

            </div>

            <div class="form-group">

                <label for="age">年龄：</label>

                <input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age" />

            </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="text-center">用户信息表</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, index) in myData">

                <td>{{index+1}}</td>

                <td>{{item.name}}</td>

                <td>{{item.age}}</td>

                <td>

                    <button class="btn btn-primary btn-sm" v-on:click="deleteMsg(index)">删除</button>

                </td>

            </tr>

            <tr v-show="myData.length!==0">

                <td colspan="4" class="text-right">

                    <button class="btn btn-danger" v-on:click="all()">删除全部</button>

                </td>

            </tr>

            <tr v-show="myData.length==0">

                <td colspan="4" class="text-center text-muted">

                    <p>暂无数据……</p>

                </td>

            </tr>

        </table>

    </div>

  <script>

  window.onload = function(){

        new Vue({

            el:"#box",

            data:{

               myData:[],

               username:'',

               age:''

            },

            methods:{

                add:function(){

                    this.myData.push({

                        name:this.username,

                        age:this.age

                    });

                    this.username='';

                    this.age='';

                },

                deleteMsg:function(index){

                    this.myData.splice(index,1)

                },

                all:function(){

                    this.myData = [];

                }

            }

        })

    }

</script>

</body>

</html>

Bootstrap+Vue.js 练习入门一的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  2. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  3. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  4. 使用Bootstrap + Vue.js实现 添加删除数据

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...

  5. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  6. Vue的理解：Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  7. Vue.js—快速入门及实现用户信息的增删

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  8. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  9. Vue.js的入门

    介绍 vue.js 是一个客户端js库,可以用来开发单页应用.为了一个项目的选型,我前前后后的看了angular.react.vuejs ,对前两者是佩服,对后者是爱.因为它简洁干净利索,并且还有高大 ...

随机推荐

  1. vue -- v-cloak解决刷新或者加载出现闪烁（显示变量）

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...

  2. 利用nginx 虚拟主机、请求转发实现不同端口web访问

    一个服务器上挂一个网站实在是有点浪费:一个服务器上可以放多个网站:可以开启nginx的虚拟主机功能:利用访问的路径或者域名不同访问不同的文件夹:例如: 1.一台服务器上放多个网站使用nginx的配置文 ...

  3. 两种方法上传本地文件到github

    https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...

  4. 常用sql语句整理：mysql

    ## 常用sql语句整理:mysql1. 增- 增加一张表```CREATE TABLE `table_name`(  ...  )ENGINE=InnoDB DEFAULT CHARSET=utf8 ...

  5. 解Linux SSH命令大全，新手必看SSH命令

    下面介绍一些基本的常用的Linux SSH命令,都是一些很简单的Linux SSH命令,新手掌握了这几个,一般管理一般的vps或者linux主机就可以了!     我们的教程介绍了putty的使用方法 ...

  6. apple watch 与 iphone 之间的通信方式

    apple watch 与 iphone 之间的通信方式:通过watchkit WatchKit应用扩展都提供一个名为WKInterfaceController的子类来管理相应的界面. 启动watch ...

  7. windows安装xampp时出现，unable to realloc xxxxxxxx bytes

    摘录自:http://blog.csdn.net/lz610756247/article/details/70842166 Windows虚拟内存的设置 问题描述:由于开启虚拟内存会导致硬盘IO性能下 ...

  8. 为什么我不愿意用ECharts

    前言 ECharts是百度一个使用 JavaScript 实现的开源可视化库,提供了创建多种多样的图标方式,包括坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图 ...

  9. JXLS使用方法（文件上传读取）xlsx文件读取

    1.官方文档:http://jxls.sourceforge.net/reference/reader.html 2.demo git地址:https://bitbucket.org/leonate/ ...

  10. Unix/Linux命令：FTP

    在Unix/Linux系统中,ftp命令用来实现客户机和远程主机之的文件传输. 语法:ftp [-Apinegvtd] [hostname] 参数:-p : 传输文件模式为被动模式-i : 关闭交互模 ...