三种方法，

1.是用jq的ajax请求之后将数据放到vue的data中，

2.是用vue-resource请求

3.axios

一、用jq ,ajax异步请求后，接收到返回的data参数并显示在前端 如下

1. 引入js,jQuery

2.html渲染表格用的指令 ==>

v-for ="data in datas "

 

.3 JS

        var goodsVue = new Vue({
            el: '#app',
            data: {
                datas : '',
            },
            methods: {
                nameSearch: function () {
                    var _self = this;
                    $.ajax({
                        type: 'GET',
                        url: '...',
                        success:function(data) {
                            _self.datas = data;
                        }
                    });
                }
            }
        })
ID名称年龄简称
{{data.id}}{{data.name}}{{data.age }}{{data.shortName}}

二、用vue-resource

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
var vm = new Vue(

{ 

el:"#list", 

data:{ datas : "", }, 

mounted: function() { 

this.$nextTick( ()=> {

 this.$http.jsonp('http://***.com').then(function(res) {

 console.log(res.data) this. datas = res.data; })

 }) },
</script>
三 、 axios
  
import axios from 'axios'



var vm = new Vue(

{ 

el:"#list", 

data:{ datas : "", }, 

mounted: function() { 

axios.get(url),then(resp=>{

//resp是接口返回的数据

})

 }})

 

 
 
 
 
 
 
 
 
 
 
 
 
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue