Vue+axios+php使用v-for遍历显示数据
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue+axios+php使用v-for遍历显示数据相关的知识，希望对你有一定的参考价值。
default.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
const app=Vue.createApp(
data()
return
list: []
,
mounted()
// this.list = ['1-小红','2-小影','3-小丽'];
const ax = axios.get('http://tt.cc',
params:
ID: 12345
)
.then(function (response)
return response;
)
.catch(function (error)
console.log(error);
)
ax.then(res=>
// console.log(res.data);
this.list = res.data;
);
,
template: `
<ul>
<li v-for="item of list">item</li>
</ul>`
);
const vm=app.mount("#app")
</script>
</html>
index.php
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: token,Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: POST,GET');
// yield方式
// 耗时0.2580891秒
// 内存: 339K
$res = [
'name'=>'willem',
'age'=>31,
'sex'=>'man',
'user_id'=>$_GET['ID']
];
echo json_back($res);
function json_back($data, $is_exit = true)
$callback = $_GET['callback'] ?? '';
if ($callback)
echo '' . $callback ."(". json_encode($data, JSON_UNESCAPED_UNICODE).")";
else
echo json_encode($data, JSON_UNESCAPED_UNICODE);
if ($is_exit) exit();
Promise对象中[[PromiseResult]]的取值
我在axios中return参数的时候在另一个JS中接收到了一个promise对象，为了获取其中的[[PromiseResult]]的内容，可使用then()函数。
示例如下：
const ax = axios.get('http://tt.cc',
params:
ID: 12345
)
.then(function (response)
return response;
)
.catch(function (error)
console.log(error);
)
ax.then(res=>
// console.log(res.data);
this.list = res.data;
);
以上是关于Vue+axios+php使用v-for遍历显示数据的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Nativescript Vue 和 Axios 显示 API 数据