vue.js请求数据
两种方法,一种是用jq的ajax请求之后将数据放到vue的data中,一种是用vue-resource请求一、动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端1 引入js,jQuery2 htmlv-for ="data in datas "ID名称年龄简称
·
三种方法,
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是接口返回的数据
})
}})
更多推荐
已为社区贡献7条内容
所有评论(0)