Rumah > pembangunan bahagian belakang > tutorial php > javascript - vuejs如何v-if的用法

javascript - vuejs如何v-if的用法

WBOY
Lepaskan: 2016-09-25 09:36:58
asal
1424 orang telah melayarinya

刚开始接解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>
                                
                                </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>
Salin selepas log masuk
Salin selepas log masuk

然后在方法中

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

我可以看到每次这样子做后,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>
                                
                                </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>
Salin selepas log masuk
Salin selepas log masuk

然后在方法中

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

我可以看到每次这样子做后,editmode确实改变成了true,但是那一行数据并没有变成input模式,求教实现方法。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan