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 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
微信小程序音乐播放器开发
Nov 20 Javascript
vue实现随机验证码功能(完整代码)
Dec 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使用eAccelerator的API开发详解
2013/06/09 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
javascript格式化json显示实例分析
2015/04/21 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
python eventlet绿化和patch原理
2020/11/21 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
static关键字的用法
2013/10/07 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
酒会邀请函
2015/01/31 职场文书
2019广播稿怎么写
2019/04/17 职场文书