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

直接上代码吧

LibGoodsController测试页面

测试介绍：

<div class="description" 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">
1.条件查询并分页（查询条件：商品名称模糊查询，商品类别，分页参数）

2.新增商品

3.更新商品

4.删除商品

5.启用/停用商品

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 v-on:click="showJSON">显示JSON

测试结果JSON：<button v-on:click="clearJSON">清空测试结果

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

2.<button v-on:click="save">保存

3.<button v-on:click="save">更新

4.<button v-on:click="delete">删除

5.<button v-on:click="enable">启用
<button v-on:click="unEnable">停用br>

商品对象：
<div class="z333" 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">

<g:form name="myform">
ID（测试启/停用，删除）：<g:textField name="id" v-model="object.id"></g:textField>

商品编码：<g:textField name="barcode" v-model="object.barcode"></g:textField><font color="red">

商品名称：<g:textField name="name" v-model="object.name"></g:textField><font color="red">

商品类别：<g:radio value="2" name="goodsType" v-model="object.goodsType"></g:radio>餐饮
<g:radio value="1" name="goodsType" v-model="object.goodsType"></g:radio>零售<font color="red"> *

商品简称：<g:textField name="shortName" v-model="object.shortName"></g:textField>

商品分类：<g:textField name="categoryName" v-model="object.categoryName"></g:textField>

品牌编码：<g:textField name="brandCode" v-model="object.brandCode"></g:textField>

产地：<g:textField name="productArea" v-model="object.productArea"></g:textField>

单位：<g:textField name="unitName" v-model="object.unitName"></g:textField>

规格：<g:textField name="goodsSpec" v-model="object.goodsSpec"></g:textField>

拼音码：<g:textField name="pyCode" v-model="object.pyCode"></g:textField>

备注：<g:textField name="remark" v-model="object.remark"></g:textField>

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

相关文章