一.

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

<!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的IOC分析（二）源码

    承接上节继续,分析Ioc的工作原理,在典型的 IOC 场景中,容器创建了所有对象,并设置必要的属性将它们连接在一起(同时一个叫DI"依赖注入"或DL"依赖查找" ...

  2. 用 Deployment 运行应用 - 每天5分钟玩转 Docker 容器技术（123）

    从本章开始,我们将通过实践深入学习 Kubernetes 的各种特性.作为容器编排引擎,最重要也是最基本的功能当然是运行容器化应用,这就是本章的内容. Deployment 前面我们已经了解到,Kub ...

  3. 4层板的pcb创建

    四层板的制作可以在原先的二层板上增加层,(软件为AD17)方法如下: 一.单击Design->Layer Stack Manager菜单(快捷键为DK),将弹出以下的界面: 二,选择上图中的Ad ...

  4. MFC中自定义消息

    在头文件stdafx.h中增加一个自定义消息宏 #define WM_USER_THREADEND WM_USER + 1 在于增加新消息的窗口或对话框类的头文件中增加一个回调函数声明 afx_msg ...

  5. js object 常用方法总结

    Object.assign(target,source1,source2,...) 该方法主要用于对象的合并,将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身 ...

  6. ip 百度地图 php

    已知一个IP $ipname=api_hits($DT_IP); -------------- //apifunction getAddressComponent($ak, $longitude, $ ...

  7. 数据库复习总结（16）-case关键字（数据透视）

    case语法: 练习1:将性别的0.1显示为男.女 select * from StudentInfo --case:对结果集中的列进行判断 --例1:显示学生信息,性别以"男女" ...

  8. ios 继承关系图

  9. Spring Boot:在Spring Boot中使用Mysql和JPA

    本文向你展示如何在Spring Boot的Web应用中使用Mysq数据库,也充分展示Spring Boot的优势(尽可能少的代码和配置).数据访问层我们将使用Spring Data JPA和Hiber ...

  10. JavaScript ES6 module 模块

    在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题.其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突. 本篇着重介绍ES6 module中的export和imp ...