vuejs如何v

WBOY
發布: 2016-09-26 08:27:20
原創
1462 人瀏覽過

剛開始接解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模式,求教實作方法。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板