最近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. pycharm中conda环境部署

    问题 pycharm中部署了conda base环境,项目中 import sklearn 报错,缺少DLL模块 . 但是在Anaconda Prompt中 import sklearn 则成功. 发 ...

  2. cloud配置中心遇到的坑

    https://blog.csdn.net/z960339491/article/details/80593982分布式配置中心为什么要有用分布式配置中心这玩意儿?现在这微服务大军已经覆盖了各种大小型 ...

  3. day 27 Python中进程的操作

    进程的创建和结束: multiprocess模块: multiprocess不是一个模块而是python中一个操作.管理进程的包 分为四个部分:创建进程部分,进程同步部分,进程池部分,进程之间数据共享 ...

  4. centos7 二进制版本安装 mysql8.0.13

    一.下载mysql二进制安装包 mysql官网: https://dev.mysql.com/downloads/mysql/ 由于国内网络问题,个人建议使用国内开源镜像站下载: http://mir ...

  5. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  6. Vue 快速原型开发

    快速原型开发 注意: 是:serve 而不是 server 通过使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展 go ...

  7. redis 哨兵（sentinel）

    redis哨兵 哨兵自动故障转移 自动通知应用最新master信息 无需担心,master挂了,程序不需要修改IP啥的,由哨兵自动完成 修改sentinel.conf protected-mode n ...

  8. PAT 1007 素数对猜想（20）

    1007 素数对猜想(20 分) 让我们定义d​n​​为:d​n​​=p​n+1​​−p​n​​,其中p​i​​是第i个素数.显然有d​1​​=1,且对于n>1有d​n​​是偶数."素 ...

  9. Spring Boot 2.0(一）：Spring Boot 2.0尝鲜-动态 Banner

    Spring Boot 2.0 提供了很多新特性,其中就有一个小彩蛋:动态 Banner,今天我们就先拿这个来尝尝鲜 Spring Boot 更换 Banner 我们先来回顾一下在 Spring Bo ...

  10. 转~Jenkins pipeline：pipeline 使用之语法详解

    一.引言 Jenkins 2.0的到来,pipline进入了视野,jenkins2.0的核心特性. 也是最适合持续交付的feature. 简单的来说,就是把Jenkins1.0版本中,Project中 ...