v-if

<tbody>
    <tr class="text-c" v-for="(user,index) in users">
        <td>{{user.userId}}</td>
        <td><img class="avatar size-L radius" v-bind:src="user.imgUrl"  onerror="this.src=contextRoot +'/images/jpg/default.jpg'"  /></td>
        <td>{{user.username}}</td>
        <td>{{user.wechatid}}</td>
        <td>{{user.facebookid}}</td>
        <td v-if="isTrue &amp;&amp; index != editIndex">{{user.usertype | changeType}}</td>
        <td v-if="index == editIndex">
            <select v-model="user.usertype"  v-on:change="getInf(user)">
                <option v-bind:value="0">玩家</option>
                <option v-bind:value="1">製作人</option>
                <option v-bind:value="2">管理員</option>
            </select>
        </td>
        <td>{{user.createtime}}</td>
        <td>{{user.modifytime}}</td>
        <td class="td-manage">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"></label>
                <div class="formControls col-xs-8 col-sm-9">
                    <ul>
                        <li class="je-li">
                <div>
                    <button class="btn btn-primary radius" type="button" v-on:click="editBtn(user,index)"><i class="Hui-iconfont"></i> 編  輯</button>
                </div>                          
                </li>
            </ul>
        </div>
    </div>
</td>                               
</tr>
</tbody>
目前在做一个修改的功能，有很多的栏位，但是只能修改一个栏位里面的内容！功能要求如下：1.没有点击修改的时候就显示从数据库里查询到的数据；2.当点击修改时，就在当前栏位给出一个选择下拉框进行修改！
<td v-if="isTrue &amp;&amp; index != editIndex">{{user.usertype | changeType}}</td>
<td v-if="index == editIndex">
    <select v-model="user.usertype"  v-on:change="getInf(user)">
            <option v-bind:value="0">玩家</option>
            <option v-bind:value="1">製作人</option>
            <option v-bind:value="2">管理員</option>
    </select>
</td>
1.所以这两个td栏位只能显示其中一个，用v-if来判断！
2.在js的Vue实例中定义了isTrue这个属性的值为true，和editIndex这个属性值为-1
//定義一個全局變量，用于接受修改之前的值
var old_userType;
var pageBar = new Vue({
el: '#page',
data:{
        users:'',
        user:'',
        pages: 0, //總頁數
        present: 1,//當前頁碼
        pageSize:10,//每頁默認顯示的頁數
        count:0,
        isTrue:true,
        editIndex:-1,
        sortCondition:'',
        sortOrder:0,//0默認降序
},
当点击编辑的按钮的时候就把要修改的这个对象和这个对象对应的下标传过去，以下是触发编辑的方法
  editBtn:function(e,i){
        pageBar.$data.editIndex = i;
        old_userType = e.usertype;
    },
解说以下：pageBar.$data.editIndex = i;一开始页面显示的是第一个td,当点击了相应的修改按钮时，就会相应的显示出第二个td,且定義了一個old_userType 全局變量，用于接受修改之前的值。
下面就是修改的方法了：
getInf:function(e)
    {   
        layer.confirm('確定修改？', {
              btn: ['確定','取消'] //按鈕
            }, function (){
                var userType = parseInt(e.usertype);
                var userId = e.userId;
                    pageBar.$http.post('updateUser',{'userId':userId,'userType':userType}).then((response) => {
                 })
                 pageBar.$data.editIndex = -1;
               //父級窗口關閉所有彈窗
                 layer.closeAll();
            }, function(){
                e.usertype =  old_userType;
                 pageBar.$data.editIndex = -1;
                 layer.close();
            });

    },
其中里面还涉及到取消修改时的做法，当点击取消时，就把修改之前的值old_userType赋值给当前的usertype,因为vue是双向绑定的； pageBar.$data.editIndex = -1;通过v-if判断，然后页面应该显示第一个td。