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>

　　这样，我们这个功能就做完了。

点击演示地址查看