<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">

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

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

  <script src="../../plugins/jquery-1.9.1.min.js"></script>

  <script src="../../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

  <title>Vuejs2.0 demo</title>

</head>

<body >

  <div id="app">

    <form action=""  onsubmit="return false;" role="form">

      <div class="form-group">

        <label class="control-label" for="inputName">姓名:</label>

        <div class="controls">

          <input type="text" id="inputName" placeholder="输入姓名" v-model="stu.name" class="form-control">

        </div>

      </div>

      <div class="form-group">

        <label class="control-label" for="inputAge">年龄:</label>

        <div class="controls">

          <input type="text" id="inputAge" placeholder="输入年龄" v-model="stu.age" class="form-control">

        </div>

      </div>

      <div class="control-group">

      <button class="btn btn-small btn-primary"  v-on:click="add();">添加</button>

        <button  type="reset" class="btn btn-small btn-danger">重置</button>

      </div>

    </form>

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

       <caption class="h2 text-center">用户信息</caption>

       <tr><th>序号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>

       <!--<tr>

       <td>1</td><td>lisi</td><td>20</td><td><button class="btn btn-small">删除</button></td>

       </tr>

       <tr>

         <td>2</td><td>lisi</td><td>30</td><td><button class="btn btn-small">删除</button></td>

       </tr>-->

       <tr v-for="(stu,index) in studata">

         <td>{{index + 1}}</td><td>{{ stu.name }}</td><td>{{ stu.age }}</td><td><button class="btn btn-small" v-on:click="del(index);">删除</button></td>

       </tr>

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

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

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

         </td>

       </tr>

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

         <td colspan="4" class="text-center">暂无数据</td>

       </tr>

     </table>

    <!-- <div id="box">

       <input type="text" v-model="msg">

       <span>{{msg}}</span>

     </div>-->

  </div>

  <script>

    window.onload = function(){

      new Vue({

        el:"#app",

        data:{

          msg:"用户信息表",

          studata:[],

          stu:{name:"",age:""}

        },

        methods:{

          add:function(){

            //this.stu = {name:"lisi",age:"20"};

            this.studata.push(this.stu);

            this.stu = {};

          },

          del:function(n){

            this.studata.splice(n,1);

          },

          delAll:function(){

            this.studata = [];

          }

        }

      });

    }

  </script>

</body>

</html>

Vuejs2.0 + bootstrap demo的更多相关文章

  1. VueJs2.0建议学习路线

    最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢. 既然大家会看这篇文章,那么 ...

  2. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  3. vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化

    vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-el ...

  4. 使用vuejs2.0和element-ui 搭建的一个后台管理界面

    说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用.灵活.高效. element-ui: ...

  5. 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）

    原网址:https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用v ...

  6. VUEJS2.0源码理解--优

    VUEJS2.0源码理解 http://jiongks.name/blog/vue-code-review/#pingback-112428

  7. vuejs2.0 文档

    http://vuejs.org/   vuejs2.0 英文文档 https://vuefe.cn/    vuejs2.0 中文文档

  8. Vuejs2.0构建一个彩票查询WebAPP(2)

    一,Vuex的使用 import Vue from 'vue' import Vuex from 'vuex' import MsgModules from './MsgModules' Vue.us ...

  9. Vuejs2.0构建一个彩票查询WebAPP(1)

    说明:本人也是刚接触VUE.js,作为一个学习笔记,旨在与初学者共同学习.其中编程语法错误或者写作水平刺眼,还望轻喷. 使用工具:Visual Studio Code.技术栈为vue2+vuex+ax ...

随机推荐

  1. 设计好玩的3D文字效果

    ​在线演示 本地下载 好玩的3D文字效果,可以替换汉字.快来试试吧!

  2. 免费的HTML模板引导 - lonely

    ​在线演示 本地下载 今天和大家分享另一款模板-Lonely.它可以被用在一些个人或者类似简单一些的网站上,动画效果的滚动非常特别!

  3. hibernate4.3.10环境搭建

    1.首先还是引入所须要的包 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFC ...

  4. Linux常用shell脚本

    在运维中,尤其是linux运维,都知道脚本的重要性,脚本会让我们的 运维事半功倍,所以学会写脚本是我们每个linux运维必须学会的一门功课,如何学好脚本,最关键的是就是大量的练习 和实践. 1．用Sh ...

  5. mac安装热更新插件

    查看.修改或者执行某些命令需要root用户的权限,如果不想直接切换到root用户,就可以使用sudo命令.sudo命令用于针对单个命令授予临时权限.sudo仅在需要时授予用户权限,减少了用户因为错误执 ...

  6. 在Ubuntu下设置默认编辑器

    在默认情况下,Ubuntu 系统会为用户预设程序.就拿文本编辑器来说吧,Ubuntu 预设的是 Nano,对某些朋友来说,使用 Vim 可能更得心应手些.那么如何更改这些预设的程序呢? 你可以使用 s ...

  7. windows installer服务无法启动，无法打开任何msi文件

    如果不成功就在"依存关系"中找是否有其他的文件没有启用. 启用"remote procedure call(rpc)" 启用"workstation& ...

  8. MSSQL语句批量替换表中某列字段内容的某个字符

    UPdate 表 Set 字段名=REPLACE(字段名,'查找目标字符','要替换的字符') 比如:在Products表中把字段CharCode中含有ch-的字符全部替换为dw- UPDATE Pr ...

  9. Flash：DisplayObject的矩阵旋转（移动/修改注册点，修改旋转点）

    简单来说,原理就是利用matrix运算,先把旋转点移到原点位置,旋转变换后再恢复到原来的位置 var a:Sprite = new Sprite(); a.graphics.beginFill(0); ...

  10. js中移除空白节点

    //移除空白节点,空白节点的类型是3 function removeWhiteNode(node) {     for (var i = 0; i < node.childNodes.lengt ...