一、动态参数显示

1、引入js

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>

2、html

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="showData">显示数据</button>
</div>

3、JS

new Vue({
                el: '#app',
                data: {
                    message: ''
                },
                methods: {
                    showData: function () {
                        var _self = this;
                        $.ajax({
                            type: 'GET',
                            url: '...',
                            success:function(data) {
                                _self.message = JSON.stringify(data);
                            }
                        });
                    }
                }
            })

二、动态列表显示

1、引入js

<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>

2、html

<div id="app">
    <table>
        <thead>
        <tr>
            <th style='width:3%; text-align: left'>ID</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>
        </tr>
        </thead>
        <tbody>
            <tr v-for="goods in goodsList">
                <td>{{goods.id}}</td>
                <td>{{goods.name}}</td>
                <td>{{goods.barcode}}</td>
                <td>{{goods.shortName}}</td>
            </tr>
        </tbody>
    </table>
    <button v-on:click="nameSearch()">查询</button><br><br>
</div>

3、js

var goodsVue = new Vue({
                el: '#app',
                data: {
                    goodsList : ''
                },
                methods: {
                    nameSearch: function () {
                        var _self = this;
                        $.ajax({
                            type: 'GET',
                            url: '...',
                            success:function(data) {
                                _self.goodsList = data;
                            }
                        });
                    }
                }
            })

Vue.js Ajax动态参数与列表显示的更多相关文章

  1. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  2. Vue.js Ajax(axios)

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. Github开源地址: ht ...

  3. vue.js + ajax 数据加载(纯新手get)

    似懂非懂的感觉下撸了一个小demo .(只是单纯的引用vue.js的小demo.)在实践中进步吧! 首先肯定要先看vue的文档,并且知道超超基础的小知识!!!奉上代码: HTML 部分: js的引用: ...

  4. vue.js 接收url参数

    1) 路由配置传参方式 在配置路由时 例如 "/firewall/authorize/:uid/:uname/:token" 页面url为 http://XXX.com/firew ...

  5. JS ajax请求参数格式( formData 、serialize)

    $("#importBtn").click(function(){ if($("#conId").val() == ""){ alert(& ...

  6. 【前端】vue.js实现输入框绑定

    vue.js实现输入框绑定 实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动 ...

  7. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

  8. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  9. (私人收藏)Vue.js手册及教程

    (私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...

随机推荐

  1. BZOJ 1989 概率相关

    思路: 一条边免费的概率为 (经过它的路/总路径条数)^2 DFS即可 有个地方没有用 long long炸了好久- //By SiriusRen #include <cstdio> us ...

  2. POJ 2536 匈牙利算法

    思路:最大匹配 (很裸) // by SiriusRen #include <cmath> #include <cstdio> #include <cstring> ...

  3. 最简单的启动并连接一个redis的docker容器

    启动一个容器: $ sudo docker run --name <name> -d redis 连接一个容器: sudo docker run -it --link <name&g ...

  4. RTSP/RTP 媒体传输和控制协议

    1 前言 本文档主要描述了 NewStream Vision 系统中前端视频服务器(DVR, 网络摄像机), 中心转发服务器以及客户端之间的多媒体通信以及控制协议. 本协议主要基于标准的 IETE 的 ...

  5. JVM源码分析之javaagent原理完全解读--转

    原文地址:http://www.infoq.com/cn/articles/javaagent-illustrated 概述 本文重点讲述javaagent的具体实现,因为它面向的是我们Java程序员 ...

  6. 理解Cookie与Session

    HTTP本身是无状态的. 这符合HTTP协议设计的目的.客户端只是简单地向服务器请求某种资源.两者都没有必须记录彼此过去的行为,每一次请求之间都是独立的. 为了保存状态.在客户端使用Cookie,在S ...

  7. .NET XML POST 请求

    //请求体,XML参数 string xmlstring = @"<root></root>“; //请求URL string postUrl ="http ...

  8. ssh: connect to host port 22: Connection refused

    配置Linux的互信,互信完成后,连接需要+端口才可以​​已经将端口修改为7777,但依旧走的是默认的22端口​​修改方式:​[root@yoon ssh]# vi /etc/servicesssh ...

  9. 学习ZBrush到底需不需要用数位板?

    在学习ZBrush时,要控制下笔的力度,而这一点是鼠标办不到的.这时就需要拥有一块手绘板.手绘板可以控制笔刷的力度. 在雕刻之前,要先来了解CG设计领域广泛应用的硬件产品—数位板,如图所示. 数位板又 ...

  10. CSS布局总结(三)

    前言:今天学的有点少,主要是有点迷.... 这是昨天没写的 一.水平居中 .parent{ text-aglin:center; } .child{ display:inline-block; } . ...