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 相关文章推荐
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
javascript闭包入门示例
Apr 30 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
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完整的日历类(CLASS)
2006/11/27 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python机器学习实战之K均值聚类
2017/12/20 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python交换两个变量的值方法
2019/01/12 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
Linux开机引导的步骤是什么
2014/02/26 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
就业协议书怎么填
2014/04/11 职场文书
公司委托书格式范文
2014/10/09 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
消防演习感想
2015/08/10 职场文书
毕业设计工作总结
2015/08/14 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python