Rumah >pembangunan bahagian belakang >tutorial php >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> </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> </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模式,求教实现方法。