一.

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

<!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. spring的applicationContext.xml没有自动提示（使用本地的文档）

    http://www.springframework.org/schema/beans/spring-beans.xsd Window>>preference>>搜索xml(X ...

  2. Android初学：Gradle 'HelloWorld' project refresh failed

    Gradle 'HelloWorld' project refresh failed Error:Failed to open zip file.Gradle's dependency cache m ...

  3. TypeScript笔记 6--接口

    接口定义 接口和Java语言一样,都是通过关键字interface定义的,如下例子: interface People { name: string; age: number; hobby?: str ...

  4. node学习笔记2 —— npm包管理

    全局模式安装包 将包安装为全局可用的可执行命令, 并非可以从任意地方require 将 package.json中bin定义的文件软链到统一的目录下, 该目录可以通过如下方式推算出来: path.re ...

  5. Spark算子--leftOuterJoin和rightOuterJoin

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/cb71cd3ac5d7965a2c61891659264d54.html leftOuterJoin和righ ...

  6. 为了解决linux配置Nginx 只能关闭防火墙才能访问的问题

    使用Nginx和iptables做访问权限控制(IP和MAC)     之前配置的服务器,相当于对整个内网都是公开的,而且,除了可以通过80端口的nginx来间接访问各项服务,也可以绕过nginx,直 ...

  7. angular 4 http 之web api 服务

    Angular Http是获取和保存数据的.主要是为了取到我json文件里的数据. 直接上代码吧: 1.  先介绍Promise模式的:(直接代码) heroes.json: 1 2 3 4 5 6 ...

  8. Selenium自动化测试脚本中三种等待时间简介

    为了提高脚本的稳定性,我们需要在脚本中增加等待时间 第一种:强制等待 Thread.sleep():固定休眠时间设置,Java的Thread类里提供了休眠方法sleep,导入包后就能使用 sleep( ...

  9. 洛谷 P1099 树网的核

    P1099 树网的核 题目描述 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边到有正整数的权,我们称T为树网(treebetwork),其中V,E分别表示结点与边的集合,W ...

  10. SpringMvc4.x--@ControllerAdvice注解

    通过@ControllerAdvice.我们可以将对于控制器的全局配置放置在同一个位置,注解了@ControllerAdvice的类的方法可以使用@ExceptionHandler,@InitBind ...