最近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. IOS是否存在32位和64位版本的区分

    苹果于2013年9月推出了iPhone 5S新手机,采用的全新A7处理器其最大特色就是支持64位运算.其64位A7处理器的使用意味着iPhone性能会大有提高,性能和速度更加出色:而要到达到这样的性能 ...

  2. akuna capital oa

    记得截图没过的test case啊!否则连复习改bug的证据都没了啊!!! 其实也不一定非得要拿面试来测试,做做lc的contest,看看自己哪里不会,也是一样的效果. 注意是单选题还是多选题 has ...

  3. Xcode9 打包ipa(导出ipa测试包)时总是意外退出

    今天用xcode9,打包ipa总是意外退出. 正处在测试阶段,所以打的也是测试包 ,路径是:Product -> Archive -> Export -> Save for Ad H ...

  4. iOS 开发实用工具

    史蒂芬的博客 (各种软件) http://www.sdifen.com/ 产品原型设计工具 -- 1.墨刀 2.Axure RP 检测接口工具 ---- 1.Charles 2. postman607 ...

  5. Redis 与Spring-data-redis 整合后封装的工具类

    此工具类方法是使用了redis 与spring 整合后,才可以使用的工具类,将 spring-data-redis 一些我们开发中常用的方法进行了封装,方便我们日常开发中进行调用: package c ...

  6. linux命令学习之：systemctl

    systemctl命令是系统服务管理器指令,主要负责控制systemd系统和服务管理器,它实际上将 service 和 chkconfig 这两个命令组合到一起. CentOS 7.x开始,CentO ...

  7. LINUX SSH修改默认22/添加端口

    通常ssh远程登录的默认端口是22,但是因为端口22属于高危端口,因此很多时候作为服务器会被关掉,不过这个端口一般是可以更改或者添加的,这样除了22端口,也可以通过别的端口进行访问. 1.首先修改配置 ...

  8. linux cp 和scp详解

    linux之cp/scp命令+scp命令详解   名称:cp 使用权限:所有使用者 使用方式: cp [options] source dest cp [options] source... dire ...

  9. 金老师的经典著作《一个普通IT人的十年回顾》

    学习人生             -------一个普通IT人的十年回顾(上)序从1994到2003,不知不觉之间,我已在计算机技术的世界里沉浸了十年.有位哲人说过:如果一个人能用十年的时间专心致志地 ...

  10. SDK Manager 基础下载

    双击SDK Manager打开Android SDK Manager. 全选以下几项 创建新项目 更改gradle的地址: 更改app的build.gradle: android { buildToo ...