一.

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

<!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. angular2 表单验证

    模版式表单 (1) angular遇到form自动接管,不想自动接管,添加ngNoForm,当标签为div时,但想被表单接管,添加ngForm; (2) ngForm可以被模版本地变量引用,以便在模版 ...

  2. YUI 的模块信息配置优先级关系梳理

    背景 YUI的配置参数较多, 可以在好几个地方配置一个module的相关信息, 如: //在全局配置, 所以YUI实例共享 YUI_config = { modules: { 'w-autcomple ...

  3. Spark学习笔记3（IDEA编写scala代码并打包上传集群运行）

    Spark学习笔记3 IDEA编写scala代码并打包上传集群运行 我们在IDEA上的maven项目已经搭建完成了,现在可以写一个简单的spark代码并且打成jar包 上传至集群,来检验一下我们的sp ...

  4. excel去除空格

    =SUBSTITUTE(Sheet1!A1," ","") 在sheet2中输入上述公式,然后再通过拖拽复制公式,即可以很快的将sheet1中的数据全部处理.

  5. 【原创】区分png图片格式和apng图片格式的解决办法

    最近公司有个项目,要抓取客户微信公众号的文章,以及文章内容中的图片,并且在图片加上客户自己的水印.我们使用阿里云OSS存储图片和加水印,发现真心好用,提升了我们的开发效率,阿里云现在是越来越强大了.. ...

  6. centos下配置sftp且限制用户访问目录[转]

    第一步:创建sftp服务用户组,创建sftp服务根目录 groupadd sftp #此目录及上级目录的所有者(owner)必须为root,权限不高于755,此目录的组最好设定为sftp mkdir ...

  7. git 签出(恢复)指定文件

    在项目开发中,偶尔会因为误删文件或其他原因需要从git仓库中恢复某些文件.此篇文章将介绍如何通过git从历史提交记录.分支记录恢复指定文件. 1. git checkout 说明:使用git chec ...

  8. 《UNIX实用教程》读书笔记

    原著:<Just Enough UNIX>  Fifth Edition  [美]Paul K.Andersen 译著:<UNIX实用教程> 第5版 宋虹 曾庆冬 段桂华 杨路 ...

  9. web项目各个clean

    project clean:清楚tomcat下的已编译的java类.class文件,包括js但不包括jsp server clean:clean tomcat work dictionary:清除to ...

  10. RequestParam\@ResponseBody

    为什么不写 RequestParam 也能拿到参数 三种写法,test(String name), test(@RequestParam String name), test(@RequestPara ...