一.

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

<!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. jq实现上传头像并实时预览功能

    效果 页面结构 <form action="" name="form0" id="form0"> <input type= ...

  2. 炫酷线条动画--svg

    我们经常可以在一些页面看到看起来很酷的线条动画,有些可以用css实现,有些css就无能为力了,今天来研究另一种实现方式,svg 如果对svg是什么还不了解的话,可以先去看看svg的基础教程: 一般对于 ...

  3. Spark性能调优之资源分配

    Spark性能调优之资源分配    性能优化王道就是给更多资源!机器更多了,CPU更多了,内存更多了,性能和速度上的提升,是显而易见的.基本上,在一定范围之内,增加资源与性能的提升,是成正比的:写完了 ...

  4. 算法-java代码实现快速排序

    快速排序 对于一个int数组,请编写一个快速排序算法,对数组元素排序. 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例: [1,2,3,5,2,3],6 [1,2,2,3,3,5] ...

  5. PHP怎么获取系统信息和服务器详细信息

    https://zhidao.baidu.com/question/1435990326608475859.html 获取系统类型及版本号: php_uname() (例:Windows NT COM ...

  6. 【编程技巧】ExtJs 设置GridPanel表格文本垂直居中

    详细讲解见 http://blog.csdn.net/li396864285/article/details/9310983 以下是我改修的代码: {         width:90,        ...

  7. web.xml 报错

    1.The markup in the document following the root element must be well-formed. 原因是配置时没有 放在根下 <web-a ...

  8. JVM核心之JVM运行和类加载全过程

    为什么研究类加载全过程? 有助于连接JVM运行过程 更深入了解java动态性(解热部署,动态加载),提高程序的灵活性 类加载机制 JVM把class文件加载到内存,并对数据进行校验.解析和初始化,最终 ...

  9. servlet入门学习之API

    java servlet API学习网址: http://tomcat.apache.org/tomcat-7.0-doc/servletapi/ http://tomcat.apache.org/t ...

  10. Spring怎么引入多个xml配置文件

    方式一:在web.xml中通过<context-param> 标签引入 <context-param> <param-name>contextConfigLocat ...