当前位置：首页 > 资讯 > 技术文档

vue bootstrap小例子一枚

时间：2020-09-24 19:07 编辑：来源：阅读：
扫一扫，手机访问

摘要：vue bootstrap小例子一枚

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>

效果： [img]http://files.jb51.net/file_images/article/201706/20176984509793.jpg?20175984519[/img] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JavaScript使用delete删除数组元素用法示例【数组长度不变】
下一篇：js检查是否全是中文

资讯排行榜
更多>>