最近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. PTA 7-2 符号配对(栈模拟)

    请编写程序检查C语言源程序中下列符号是否配对:/*与*/.(与).[与].{与}. 输入格式: 输入为一个C语言源程序.当读到某一行中只有一个句点.和一个回车的时候,标志着输入结束.程序中需要检查配对 ...

  2. c++笔试题贪吃蛇问题

    贪吃蛇 现在有一个N*M(N,M=100)的方形矩形,在这个矩形的每一个方格上都放有一个随机值,一条可爱的小蛇从矩形的 左上角开始出发,每次移动都只能移动一格,向右或向下,而每到达一格贪吃的小蛇都会吧 ...

  3. eclipse打war包编译文件不更新

    如题.多次打包都不更新,各种clean都试了都不行.重启eclipse也不行.最后重启电脑可以了. 另外eclipse导出war包似乎存在bug,时间比系统时间超前,如下图所示.我17:19导出的包, ...

  4. MVC学习（三）Code-First Demo

    前面两篇文章介绍了DataBase-First例子,这里就介绍Code-First. 个人简单理解:就是在程序中编写代码,然后在数据库中生成相应的表.字段.约束等等.听上去蛮神奇的.Now,begin ...

  5. NPOI创建DOCX常用操作

    1.  创建文档 XWPFDocument m_Docx = new XWPFDocument(); 2.  页面设置 //1‘=1440twip=25.4mm=72pt(磅point)=96px(像 ...

  6. c# 24种设计模式

    备忘录模式(Memento Pattern) 策略模式(Strategy Pattern) 抽象工厂模式(Abstract Factory Pattern) 代理模式(Proxy Pattern) 单 ...

  7. nvl 与 nvl2

    NVL函数 Oracle/PLSQL中的一个函数. 格式为: NVL( string1, replace_with) 功能:如果string1为NULL,则NVL函数返回replace_with的值, ...

  8. git 本地仓库与远程仓库的连接

    在远程如github新建一个项目名称为blog, 本地项目为store,是一个laravel框架项目,首先用 git init初始化本目,然后用git remote add origin git@gi ...

  9. AsyncTask的缺陷

    导语:在开发Android应用的过程中,我们需要时刻注意保障应用的稳定性和界面响应性,因为不稳定或者响应速度慢的应用将会给用户带来非常差的交互体验.在越来越讲究用户体验的大环境下,用户也许会因为应用的 ...

  10. Python 官方文件

    7.2. 文件读写 函数 open() 返回 文件对象,通常的用法需要两个参数:open(filename, mode). >>> f = open('workfile', 'w') ...