vue初學 對v-model v-on 及簡單數據的操做。

剛開始接觸vue.js，笨笨的我在網上本身找資料。看完vue的 v-model 及其點擊事件後，寫了一個小功能。

首先，因爲想簡便樣式的書寫，因此引用的bootstrap庫。

  <link rel="stylesheet" href="lib/bootstrap.min.css">
  <script src="lib/jquery-1.7.2.js"></script>
  <script src="lib/bootstrap.js"></script>
  <script src="vue.js"></script>

　　而後我先用bootstrap把html代碼書寫出來。

<div class="container">
        <form role="form">
            <div class="form-group">
                <label for="username">用戶名:</label>
                <input type="text" id="username" class="form-control" placeholder="輸入用戶名">
            </div>
            <div class="form-group">
                <label for="age">年　齡:</label>
                <input type="text" id="age" class="form-control" placeholder="輸入年齡">
            </div>
            <div class="form-group">
                <input type="button" value="添加" class="btn btn-primary">
                <input type="button" value="重置" class="btn btn-danger">
            </div>
        </form>
        <hr>
        <table class="table table-bordered table-hover">
            <caption class="h2 text-info">用戶信息表</caption>
            <tr class="text-danger">
                <th class="text-center">序號</th>
                <th class="text-center">名字</th>
                <th class="text-center">年齡</th>
                <th class="text-center">操做</th>
            </tr>
            <tr class="text-center">
                <td>1</td>
                <td>blue</td>
                <td>50</td>
                <td>
                    <button class="btn btn-primary btn-sm">刪除</button>
                </td>
            </tr>
            <tr class="text-center">
                <td>1</td>
                <td>strive</td>
                <td>16</td>
                <td>
                    <button class="btn btn-primary btn-sm">刪除</button>
                </td>
            </tr>
            <tr>
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm">刪除所有</button>
                </td>
            </tr>
            <tr>
                <td colspan="4" class="text-center text-muted">
                    <p>暫無數據....</p>
                </td>
            </tr>
        </table>
    </div>

　　如今，讓咱們來用vueJs來完成這個功能，

　　首先：

　　

new Vue({
                el:'#box',
                data:{
                    myData:[]
                },
                methods:{
                  
                }
            });

　　咱們用myData來存儲咱們的數據。 若是這個數據爲空。則顯示暫無數據，若是不爲空，則顯示錶格，加載這裏面的數據。咱們須要用到 vueJs 的 v-show：

　　

<tr v-show="myData.length != 0">
                <td colspan="4" class="text-right">
                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">刪除所有</button>
                </td>
 </tr>
<tr v-show="myData.length == 0">
          <td colspan="4" class="text-center text-muted">
                 <p>暫無數據....</p>
          </td>
 </tr>

　　這樣，若是myData裏面有數據。則不顯示暫無數據表格。否則就顯示刪除所有按鈕。

而後，咱們若是有數據，則須要用v-for來加載數據。

 <tr class="text-center" v-for="item in myData">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" >刪除</button>
                </td>
            </tr>

　　接下來，咱們須要向myData裏面添加數據。這時，咱們會用到數據的雙向綁定功能。 

 data:{
                    myData:[],
                    username:"",
                    age:''
       },

<input type="text" id="username" class="form-control" v-model="username" placeholder="輸入用戶名" >

<input type="text" id="age" class="form-control" v-model="age" placeholder="輸入年齡" >

　　接下來，咱們須要給添加按鈕綁定事件。用 v-on:click=''；這裏vue幫咱們封裝了點擊事件的方法，能夠用 @click=''來替代v-on:click；

<input type="button" value="添加"  class="btn btn-primary" @click="add()" >

　　如今咱們須要在js中  vue對象中添加這個add方法。獲取到數據，並添加到myData裏面。

 methods:{
                    add:function(){
                        if(this.username!==""){
                            this.myData.push({
                                name:this.username,
                                age:this.age
                            });
                        }
                        this.username="";
                        this.age="";
                    }
                }

　　這樣，咱們就完成了第一步。添加功能以及成功了。接下來，咱們作刪除功能。首先，點擊刪除時。咱們須要獲取當前的index，在vue中，數據的key值，咱們能夠直接用$index來獲取。咱們須要把獲取到的這個$index保存起來。

　　

 data:{
                    myData:[],
                    username:"",
                    age:'',
                    nowIndex:"-200"
                },

 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index'">刪除</button>

　　咱們須要給彈窗口的肯定刪除按鈕綁定時間。並把這個nowIndex傳入到當前方法。

<button data-dismiss="modal" class="btn btn-danger btn-sm" @click="deletMsg(nowIndex)">確認</button>

　　如今，和剛纔add時，在方法中添加deletMsg方法：

deletMsg:function(num){
                       this.myData.splice(num,1);
   }

　　這樣，咱們的單個刪除就作好了。最後，咱們要作所有刪除功能，點擊所有刪除時。咱們須要把nowIndex重置爲一個小於0的值。

                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">刪除所有</button>

　而後，在deletMsg方法中判斷：

deletMsg:function(num){
                        if(num==-2){
                            this.myData=[];
                        }else{
                            this.myData.splice(num,1);
                        }
                    }

　功能就作完了。可是，點擊單個刪除和所有刪除時，提示內容須要改變。

 data:{
                    myData:[],
                    username:"",
                    age:'',
                    nowIndex:"-200",
                    msg:"你肯定要刪除麼?"
                },
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index,msg='你肯定要刪除麼？'">刪除</button>
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2,msg='你肯定要所有刪除麼？'">刪除所有</button>
<h4 class="modal-title">{{msg}}</h4>

　　這樣，咱們這個功能就作完了。

點擊演示地址查看