javascript - vuejs如何v-if的用法-php教程-PHP中文网

javascript - vuejs如何v-if的用法

php中文网

发布： 2016-09-25 09:36:58

原创

1676人浏览过

刚开始接解vuejs,现在有个问题是这样的，我想实现一个表格中的数据查看的时候是普通的text数据，一旦点击每一行的编辑按钮时，这一行的数据以input输入框来实现，
我初步的设想是这样的：给这一列数据的data添加一个editmode属性，一旦点击编辑按钮后改成editmode为true,然后v-if根据这个值来决定输出样式：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

<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>

登录后复制

然后在方法中

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

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

回复内容：

<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>

登录后复制

然后在方法中

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

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

大家都在看：

在Vue.js组件中集成和渲染Twig模板内容 Vue.js组件中集成Twig模板的策略与实践解决 Laravel 与 Vue.js 应用数据无法正确显示的问题解决 Laravel 与 Vue.js 应用中数据无法正确显示的问题解决 Laravel 与 Vue.js 应用中数据未正确显示的问题