javascript - vuejs如何v-if的用法

剛開始接解vuejs,現在有個問題是這樣的，我想實現一個表格中的數據查看的時候是普通的text數據，一旦點擊每一行的編輯按鈕時，這一行的數據以input輸入框來實現，
我初步的設想是這樣的：給這一列資料的data加上一個editmode屬性，一旦點擊編輯按鈕後改成editmode為true,然後v-if根據這個值來決定輸出樣式：

<code><table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>pass</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="data in apidata" track-by="$index">
                            <tr>
                                <td>{{$index + 1}}</td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </div>
                                </td>
                                <td>
                                    <button v-on:click="remove($index)" class="btn btn-danger">删除</button>
                                    <button v-on:click="edit(data)" class="btn btn-danger">编辑</button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table></code>

然後在方法中

<code>            edit: function(data){
                //alert(data.editmode);
                data.editmode = true;
            }</code>

我可以看到每次這樣子做後，editmode確實改變成了true,但是那一行資料並沒有變成input模式，求教實作方法。

回覆內容：

剛開始接解vuejs,現在有個問題是這樣的，我想實現一個表格中的數據查看的時候是普通的text數據，一旦點擊每一行的編輯按鈕時，這一行的數據以input輸入框來實現，
我初步的設想是這樣的：給這一列資料的data加上一個editmode屬性，一旦點擊編輯按鈕後改成editmode為true,然後v-if根據這個值來決定輸出樣式：

<code><table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>pass</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="data in apidata" track-by="$index">
                            <tr>
                                <td>{{$index + 1}}</td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </td>
                                <td>
                                    <div v-if="data.editmode"><input v-model="data.name"></div>
                                    <div v-else>{{data.name}}</div>
                                </div>
                                </td>
                                <td>
                                    <button v-on:click="remove($index)" class="btn btn-danger">删除</button>
                                    <button v-on:click="edit(data)" class="btn btn-danger">编辑</button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table></code>

然後在方法中

<code>            edit: function(data){
                //alert(data.editmode);
                data.editmode = true;
            }</code>

我可以看到每次這樣子做後，editmode確實改變成了true,但是那一行資料並沒有變成input模式，求教實作方法。