vuejs如何v-if的用法

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

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

然后在方法中

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

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

阅读 8.6k
4 个回答

代码是没有错的,我试了一下可以跑起来:
https://jsbin.com/rajeqo/edit...

我怀疑问题出在你的 apidata 这个数据里面没有 editmode 这个属性. 导致在 edit 里面赋值 data.editmode Vue 并没有去监听这个变化。所以你要做的就是 默认让 apidata 里面的数据项都有一个默认的 editmode 属性

楼主麻烦贴下data代码 以上代码我看了下是没有错误的

为何要那么麻烦写

<div v-if="data.editmode"><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
                            

直接用input 展示数据就好 了 ,使用css 将input的样式去掉,顺带禁用input的编辑,
编辑时候在恢复回来不就得了

        <table>
            <tr>
                <td>姓名:</td>
                <td> 
                    <input type="text" :disabled="isEdi" :class="{ 'ediClass' : isEdi }" v-model="text" >
                </td>
                <td>
                    <button @click=" saveOrEdi "> {{ isEdi ? '保存' : '编辑' }}  </button>
                </td>
            </tr>
        </table>
        <style>
            input{  border: none;  outline: none;  background: rgba(255,255,255,0);  }
            .ediClass{  border:1px #e9e9e9 solid;  }
        </style>

        <script>
        
              new Vue({
                        el:"body",
                        data: {
                            isEdi: false,
                            text: '某某'
                        },
                        methods: {
                            saveOrEdi:function(){
                                if(this.isEdi){
        //                            编辑状态下 执行保存
                                ....
                                    this.$set("isEdi",false)
                                }else{
        //                            非编辑状态下 编辑
                                    this.$set("isEdi",true)
                                }
                            }
                        }
                    })

        </script>

v-if很多用都是dom的显示与否,请问v-if能判断dom中{{text}}的显示?
比如data.type=1 {{是}} 或者 data.type=0 {{否}}。初学vue还望指教。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题