vue bootstrap小例子一枚

更新時(shí)間：2017年06月09日 08:42:23 作者：LarryHai6

這篇文章主要為大家詳細(xì)介紹了vue bootstrap小例子一枚，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue和angular非常像都是MVVM。道理都是想通的，就是語(yǔ)法的差異

我覺(jué)得vue和angular區(qū)別：

1.vue更輕，更便捷，適用于移動(dòng)開(kāi)發(fā)

2.vue更簡(jiǎn)單。。

angular和vue指令的差別大致就是 ng-xxx和v-xxx。
vue是用過(guò)new Vue創(chuàng)建實(shí)例，然后在屬性data綁定數(shù)據(jù)，在屬性methods里添加方法。
vue的循環(huán)遍歷是 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">序號(hào)</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>暫無(wú)數(shù)據(jù)</p>
    </td>
   </tr>
  </table>
 </div>


</body>
</html>

效果：