Vue.js 动态数据处理 简单版

最新推荐文章于 2023-11-23 10:50:59 发布
最新推荐文章于 2023-11-23 10:50:59 发布
阅读量1.1k 收藏
点赞数 
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>LibGoodsController测试页面</title>
    <meta name="layout" content="main"/>
    <script type="text/javascript" src="${resource(base: '..', dir: 'js', file: 'jquery-2.1.3.js')}"></script>
    <script type="text/javascript" src="${resource(base: '..', dir: 'js', file: 'vue.min.js')}"></script>
    <script>
        $(function() {
            //列表选中ID
            var tableSelectId;
            //列表选中tr
            var selTr = null;
            //列表JSON
            var printjson;

            //初始化过滤器
            Vue.filter('isAuditFormatter', function (value) {
                if(value == true){
                    return "已审核";
                }
                else return "未审核";
            });

            Vue.filter('isEnabledFormatter',function (value){
                if(value == true){
                    return "启用";
                }
                else return "停用";
            });

            Vue.filter('goodsTypeFormatter',function (value){
                if(value == "1"){
                    return "零售";
                }
                else return "餐饮";
            });

            var OBJECT_CRUD = new Vue({
                el: '#object_crud',
                data: {
                    //显示JSON
                    message:'',
                    //对象
                    object : '',
                    //对象数组
                    list : ''
                },
                methods: {
                    //分页查询并显示数据
                    showData: function () {
                        var _self = this;
                        var url = "...";
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success:function(data) {
                                printjson = JSON.stringify(data);
                                _self.list = data.data.rows;
                            }
                        });
                    },
                    //显示查询JSON
                    showJSON:function(){
                        this.message = printjson;
                    },
                    //清空查询返回JSON
                    clearJSON:function(){
                        this.message = "";
                    },
                    //选中列表行 点击事件
                    onClick:function (evt) {
                        var _self = this;
                        var el = evt.srcElement?evt.srcElement:evt.target;
                        if(el.tagName.toUpperCase() !="TD") return;
                        var tr = el.parentNode;
                        tr.style.backgroundColor="yellow";
                        if(selTr !=null)
                        {
                            selTr.style.backgroundColor ="white";
                        }
                        selTr = tr;
                        tableSelectId = selTr.cells[0].innerHTML;
                        //通过ID获取对象
                        var url = "...";
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success:function(data) {
                                if(data.result == "true"){
                                    _self.object = data.data;
                                }
                            }
                        });
                    },
                    //启用 选中的 记录
                    enable:function(){
                        var _self = this;
                        var url = "...";
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success:function(data) {
                                _self.message = JSON.stringify(data);
                                if(data.result == "true"){
                                    _self.showData();
                                }
                            }
                        });
                    },
                    //停用 选中的 记录
                    unEnable:function(){
                        var _self = this;
                        var url = "...";
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success:function(data) {
                                _self.message = JSON.stringify(data);
                                if(data.result == "true"){
                                    _self.showData();
                                }
                            }
                        });
                    },
                    //删除 记录
                    delete:function(){
                        var _self = this;
                        var url = "...";
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success:function(data) {
                                _self.message = JSON.stringify(data);
                                if(data.result == "true") {
                                    _self.showData();
                                }
                            }
                        });
                    },
                    save:function(){
                        var _self = this;
                        var url = "...";
                        $.ajax({
                            type: 'POST',
                            url: url,
                            data:{
                                id:$('#id').val()
                                /*...*/
                            },
                            success:function(data) {
                                _self.message = JSON.stringify(data);
                                if(data.result == "true"){
                                    _self.showData();
                                }
                            }
                        });
                    }
                }
            })
        });
    </script>
</head>

<body>
<div style="text-align: center" id="test_title">
    <font color="#ff1493" size="6">商品信息管理服务(web-service-libGoods)接口测试</font> <br><br><br>
</div>


<div id="object_crud">

    测试介绍：<br><br>
    <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.条件查询并分页（查询条件：商品名称模糊查询，商品类别，分页参数）<br>
        2.新增商品<br>
        3.更新商品<br>
        4.删除商品<br>
        5.启用/停用商品
    </div><br><br>

    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>&nbsp;
    <button v-on:click="unEnable">停用</button>br><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"><br>
        <g:form name="myform">
            ID（测试启/停用，删除）：<g:textField name="id" v-model="object.id"></g:textField><br><br>
            商品编码：<g:textField name="barcode" v-model="object.barcode"></g:textField><font color="red">  *</font><br><br>
            商品名称：<g:textField name="name" v-model="object.name"></g:textField><font color="red">  *</font><br><br>
            商品类别：<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">  *</font><br><br>
            商品简称：<g:textField name="shortName" v-model="object.shortName"></g:textField><br><br>
            商品分类：<g:textField name="categoryName" v-model="object.categoryName"></g:textField><br><br>
            品牌编码：<g:textField name="brandCode" v-model="object.brandCode"></g:textField><br><br>
            产地：<g:textField name="productArea" v-model="object.productArea"></g:textField><br><br>
            单位：<g:textField name="unitName" v-model="object.unitName"></g:textField><br><br>
            规格：<g:textField name="goodsSpec" v-model="object.goodsSpec"></g:textField><br><br>
            拼音码：<g:textField name="pyCode" v-model="object.pyCode"></g:textField><br><br>
            备注：<g:textField name="remark" v-model="object.remark"></g:textField><br><br>
        </g:form>
    </div><br><br>
</div>
</body>
</html>
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
MonkeyProgirl
关注
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
在Vue.js应用开发中，尤其是使用Vue CLI 3.x或更高版本时，有时我们需要处理`static`文件夹下的静态资源，比如图片、字体文件或JSON数据。这些文件不会被webpack自动处理，因此需要进行额外的配置。本文将详细介绍...
vue.js实现数据动态响应 Vue.set的简单应用
10-19
在探讨Vue.js实现数据动态响应的过程中，我们经常会遇到一些难点，特别是在处理响应式数据时。Vue.js是一个流行的前端JavaScript框架，它利用数据劫持和观察者模式来实现数据的响应式系统。开发者在使用Vue.js时，最...
Vue实现表格中对数据进行转换、处理的方法
10-18
主要介绍了Vue实现表格中对数据进行转换、处理的方法,需要的朋友可以参考下
(二)vue数据处理
weixin_30828379的博客
12-06 293
1:计算属性和监视 计算属性 1) 在 computed 属性对象中定义计算属性的方法 2) 在页面中使用{{方法名}}来显示计算的结果 2:监视属性 1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性 2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算 3: 计算属性高级 1) 通过 getter/setter 实现对属性...
关于vue的一些数据处理方式
@@小旭的博客
08-31 1106
splice(　index,　len,　[item]) 用来删除/替换/添加数组内某一个或者几个值（该方法会改变原始数组）。4、unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。1、.push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。5、splice() 方法向数组中添加或删除项目，然后返回被删除的项目。10、.slice()方法从已有的数组中返回选定的元素。7、reverse() 方法用于颠倒数组中元素的顺序。2、.pop() 方法用于删除数组的最后一个元素。
JS（Vue）数据处理实战（一）
张兴华的博客
07-12 628
有如下需求： 将数据通过表格展示。 数据： issuesSummary = { Answered: { Medium: [ {id: "60030011"}, {id: "60030012"}, {id: "60030013"}, {id: "60030014"}, {id: "60030015"} ], ...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.min.js&vue.min.js&vue.common.js&vue.esm.js&vue.runtime.js等 真实资源共计14个js
04-22
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。它采用了声明式的数据绑定和组件化的设计，使得开发过程更加高效且易于维护。在提供的压缩包中，包含了多种不同版本的Vue.js库，这些版本各有其...
vue数据处理常用操作方法（数组，对象，字符串，数组对象）
最新发布
small red red的博客
11-23 1364
5、Object.assign(target,source)： 将一个或多个。3、Object.entries(obj)：枚举键值对组合-返回一个包含。2、Object.values(obj)：枚举键值-返回一个包含。1、concat(str1，str2，...，strN)：连接。1、Object.keys(obj)：枚举属性-返回一个包含。2、charAt(index)：返回指定索引位置的。4、unshift()：将一个或多个元素添加到。1、push()：将一个或多个元素添加到。
vue中的数据处理
weixin_50488897的博客
10-19 177
vue学习笔记
vue项目数据处理方法
xiuxiuxiu555的博客
11-08 464
项目数据处理方法
vue处理数据
QZ9420的博客
04-21 422
数据格式： 介绍： 数据是一个数组，数组里边有对象，需要转换成4个数组，一个是社区名字，另外三个分别对应每个小区的干垃圾、湿垃圾、可回收垃圾的投递次数，数据是分开给的 getList() { this.$http .request("deviceStausZbChart", {}) .then((data) => { console.log(data.data.data); let allData = data
vue下一些数据处理
wenmin1987的博客
12-10 666
1.数组[ {},{},{},{} ]==》[ [{},{}] , [{},{}] ] 遍历 去重 建模 关联 排序 var arr=[{cname:'A',reType:1,riskRemark:'1111'},{cname:'A',reType:2,riskRemark:'22222'},{cname:'B',reType:1,riskRemark:'3333'},{cname:'B',...
vue 中常使用的数据处理方法
JackChan
04-18 1067
vue 中常使用的数据处理方法
vue中对数据处理的一些简单操作
weixin_46531656的博客
06-27 256
vue中对数据处理的一些简单操作
VUE 前端处理数据常用方法
wanghui374的博客
05-08 3454
1、对象排序 let arrData={"张三":15,"李四":30,"万系":2,"是三":3}; function ObjectOrder(data){ let keysSorted = Object.keys(data).sort(function(a,b){return data[b]-data[a]}) //排序健名 let newD={}; for(let i=0;i&lt...
【vue】总结几种处理数据的常用方法
weixin_42575720的博客
07-22 2241
【vue】总结几种处理数据的常用方法
Vue.js实战：动态数据处理详解及示例
"Vue.js实现简单动态数据处理教程" 在本文中，我们将深入探讨如何使用Vue.js来实现动态数据处理，这是一种强大的前端框架，特别适合构建交互式用户界面。Vue.js的核心概念之一是数据绑定，它允许我们在UI元素上直接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值