Vue.js实现简单动态数据处理

1.商品名称:<g:textField name="queryStr" id="queryStr1" value="佳能"></g:textField>
商品类型 :
<g:radio value="2" name="goodsTypeSearch"></g:radio>餐饮
<g:radio value="1" name="goodsTypeSearch" checked="true"></g:radio>零售
列表参数： 当前页：<g:textField name="page" value="0"></g:textField> 每页显示：<g:textField name="pageSize" value="20"></g:textField>
<button v-on:click="showData">查询</button>
<button v-on:click="showJSON">显示JSON</button>
<br><br>

测试结果JSON：<button v-on:click="clearJSON">清空测试结果</button>
<br><br>
<div class="jsonResult" style="height:auto;width:auto;border-top: 1px dashed #F00;
border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
{{message}}
</div><br><br>

测试列表：
<br><br>
<div style="height:auto;width:auto;border-top: 1px dashed #F00;
border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
<table id="table" style="border:2";>
<thead>
<tr>
<th style='width:3%; text-align: left'>ID</th>
<th style='width:10%; text-align: left'>商品编码</th>
<th style='width:5%; text-align: left'>商品类别</th>
<th style='width:10%; text-align: left'>商品名称</th>
<th style='width:10%; text-align: left'>简称</th>
<th style='width:5%; text-align: left'>是否审核</th>
<th style='width:5%; text-align: left'>是否启用</th>
</tr>
</thead>
<tbody>
<tr v-for="data in list" v-on:click="onClick">
<td>{{data.id}}</td>
<td>{{data.barcode}}</td>
<td>{{data.goodsType | goodsTypeFormatter}}</td>
<td>{{data.name}}</td>
<td>{{data.shortName}}</td>
<td>{{data.isAudit | isAuditFormatter}}</td>
<td>{{data.isEnabled | isEnabledFormatter}}</td>
</tr>
</tbody>
</table>
</div>

<br><br>
2.<button v-on:click="save">保存</button> <br><br>
3.<button v-on:click="save">更新</button> <br><br>
4.<button v-on:click="delete">删除</button> <br><br>
5.<button v-on:click="enable">启用</button> 
<button v-on:click="unEnable">停用</button>br><br>