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

前端之家收集整理的这篇文章主要介绍了Vue.js实现简单动态数据处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

直接上代码

LibGoodsController测试<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> <Meta name="layout" content="main"/>



<div id="object_crud">

测试介绍:


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

ID 商品编码 商品类别 商品名称 简称 是否审核 是否启用




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>



以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/41751.html

猜你在找的Vue相关文章