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 相关文章推荐
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
深入探寻javascript定时器
Jan 02 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
Vue computed 计算属性代码实例
Apr 22 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
webpack多页面开发实践
2017/12/18 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
element 动态合并表格的步骤
2020/12/31 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
初学Python实用技巧两则
2014/08/29 Python
python批量提交沙箱问题实例
2014/10/08 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
关于Python错误重试方法总结
2021/01/03 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
应届毕业生如何写求职信
2014/02/16 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
学期个人工作总结
2015/02/13 职场文书
会议新闻稿
2015/07/17 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL