web中切换详情信息和编辑功能

在web应用中，我们经常会查看某个数据详情，并且能编辑它，在同一个页面同一个区域中，不用再弹窗，具体描述可能不太清楚，请看效果图，这是之前做的一个商品的详情和编辑，现在记录一下：

数据的绑定我是使用vue.js绑定的，比较方便，贴部分代码，其他类似：

     <td>Sku编码</td>
     <td>
         <span>{{product.sku}}</span>
         <input type="text" class="textbox underline edit-item" v-model="product.sku" style="display: none;">
     </td>

隐藏了一个input，同时绑定了商品对应的数据，点编辑的时候，把这些文本框显示出来就好了。

    function editProductBasicInfo() {
        $(".edit-item").fadeIn().siblings('span').hide();
        $('#saveProductBasicBtn').fadeIn();
        $('#cancelEditBtn').fadeIn();
    }

比较简单，比较实用。