最近vue挺火，最近也不是特别忙，就学习了下。

vue和angular非常像都是MVVM。道理都是想通的，就是语法的差异

我觉得vue和angular区别：

1.vue更轻，更便捷，适用于移动开发

2.vue更简单。。

angular和vue指令的差别大致就是 ng-xxx和v-xxx。

vue是用过new Vue创建实例，然后在属性data绑定数据，在属性methods里添加方法。

vue的循环遍历是 v-for=“” ,事件是 v-on：clicl =“”；

直接上代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="bootstrap.css">

    <style>

        tr{

            vertical-align: inherit;

        }

    </style>

    <script src="jquery.js"></script>

    <script src="bootstrap.js"></script>

    <script src="node_modules/vue/dist/vue.js"></script>

    <script>

        window.onload= function(){

            var vm = new Vue({

                el:'.container',

                data:{

                    myData:[],

                    username:'',

                    age:''

                },

                methods:{

                    add:function(){

                        this.myData.push({

                            name:this.username,

                            age:this.age

                        });

                        this.username="";

                        this.age="";

                    },

                    reset:function(){

                        this.username="";

                        this.age="";

                    },

                    del:function(index){

                        this.myData.splice(index,1)

                    },

                    delAll:function(){

                        this.myData=[];

                    }

                }

            })

        }

    </script>

</head>

<body>

    <div class="container">

        <form role="form">

            <div class="form-group">

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

                <input placeholder="输入用户名" type="text"

                       v-model="username"

                       id="username" class="form-control">

            </div>

            <div class="form-group">

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

                <input placeholder="输入年龄" type="text"

                       v-model="age"

                       id="age" class="form-control">

            </div>

            <div class="form-group">

                <input type="button" class="btn btn-info" v-on:click="add()" value="添加">

                <input type="button" class="btn btn-info" v-on:click="reset()" value="重置">

            </div>

        </form>

        <hr>

        <table class="table table-bordered table-hover">

            <caption>用户信息表</caption>

            <tr class="text-danger">

                <td class="text-center">序号</td>

                <td class="text-center">名字</td>

                <td class="text-center">年龄</td>

                <td class="text-center">操作</td>

            </tr>

            <tr v-for="(item,index) in myData">

                <td class="text-center">{{index+1}}</td>

                <td class="text-center">{{item.name}}</td>

                <td class="text-center">{{item.age}}</td>

                <td class="text-center">

                    <button class="btn btn-danger btn-sm"

                        v-on:click="del(index)"

                        data-toggle="dialog" data-target="#layer"

                    >删除</button>

                </td>

            </tr>

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

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

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

                </td>

            </tr>

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

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

                    <p>暂无数据</p>

                </td>

            </tr>

        </table>

    </div>

</body>

</html>

执行效果如下

分类: bootstrap,vue

vue +bootstrap 写的小例子的更多相关文章

  1. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  2. 【转】忙里偷闲写的小例子---读取android根目录下的文件或文件夹

    原文网址:http://www.cnblogs.com/wenjiang/p/3140055.html 最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还 ...

  3. 像VUE一样写微信小程序-深入研究wepy框架

    像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...

  4. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  5. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  6. 忙里偷闲写的小例子---读取android根目录下的文件或文件夹

    最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还要搞,自己的东西还在文档阶段,真的是让人想死啊!! 近半个月来,C#这方面的编码比较多,android和 ...

  7. 基于vue-cli、elementUI的Vue超简单入门小例子

    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...

  8. jetty 介绍以及小例子

    Jetty 是一个开源的servlet容器,它为基于Java的web容器,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开发人员可以将 ...

  9. css display table使用小例子实验

    display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...

随机推荐

  1. TZOJ 二分图练习

    二分图主要是 1.如何建图,谁匹配谁,怎么匹配 2.判断求的是什么:最大匹配=最小点覆盖,最大独立子集=最小路径覆盖=最小边覆盖=图中顶点数-最大匹配 A.2733:棋盘游戏 描述 小希和Gardon ...

  2. c++实现中的一些注意 事项

    1,尽可能延后对象中的变量定义式的出现,这样可以增加程序的清晰度,尽量少的调用构造,如果有定义变量最好在末尾定义并给予初值,这样就避免了默认构造函数的调用. 2 尽量少做转型操作. const_cas ...

  3. nodejs项目进程管理器之pm2

    如果用pm2作为nodejs的进程管理器的话,参考以下两篇文章 程序员小卡:http://www.cnblogs.com/chyingp/p/pm2-documentation.html 官方:htt ...

  4. JDBC的学习

    JDBC —— 用Java访问数据库 一.需要用到第三方类:mysql-connector-java-5.0.8-bin.jar,并做好导包处理: 二.初始化驱动: 三.建立与数据库的链接: 四.创建 ...

  5. shell脚本实例总结

    1.判断文件夹是否存在 #!/bin/sh workspace="/home/web/mall" #如果文件夹不存在 if [ ! -d ${workspace} ]; then ...

  6. TabLayout+ViewPager的简单使用

    1.   build.gradle文件中加入 compile 'com.android.support:design:22.2.0' 2.写Xml文件,注意TabLayout的三个属性 app:tab ...

  7. JFinal Web开发学习(九)后台添加前台显示博客

    效果: 发博客: 显示博客: 后台:使用hui-admin,文章编辑器是百度开源的ueditor 前台:使用layui前端框架 1.写控制器BlogController controller包中 pa ...

  8. Dottrace 10.0.2 使用心得

    开发环境vs2015 软件:JetBrains dotTrace 10.0.2 刚开始不知道怎么下手,多看了一会还有一位仁兄的解释.算是对某个功能小有入门了. 当前会查看某个方法在抓取快照时间它的执行 ...

  9. Oracle_高级功能(4) 数据库存储结构

    数据库存储结构分为:物理存储结构和逻辑存储结构.物理结构和逻辑结构分开,对物理数据的存储不会影响对逻辑结构的访问.1.物理存储结构 数据库文件 os block2.逻辑存储结构 tablespace ...

  10. Oracle_SQL(3) DML增删改

    sql语言按功能分为:数据定义语言DDL.数据操纵语言DML.数据查询语言DQL.数据控制语言DCL 一.数据操纵语言DML1.insert 新增 语法:insert into <表名> ...