vue bootstrap小例子一枚


Posted in Javascript onJune 09, 2017

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" rel="external nofollow" >
 <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>

效果:

vue bootstrap小例子一枚

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
详解webpack解惑:require的五种用法
Jun 09 #Javascript
Bootstrap输入框组件使用详解
Jun 09 #Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
微信分享调用jssdk实例
Jun 08 #Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 #Javascript
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
浅谈 Vue v-model指令的实现原理
Jun 08 #Javascript
You might like
PHP分页类集锦
2014/11/18 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
bootstrap Table插件使用demo
2017/08/07 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python显示天气预报
2014/03/02 Python
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python易忽视知识点小结
2015/05/25 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
解决pip install psycopg2出错问题
2020/07/09 Python
初中生自我鉴定
2014/02/04 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014年财务部工作总结
2014/11/11 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
荒岛余生观后感
2015/06/09 职场文书
办公室卫生管理制度
2015/08/04 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python