vue引入链接
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>axios引入链接
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>简单事例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="vue">
<div>name: {{info.name}}</div>
<div>address: {{info.address.street}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#vue",
data(){
return{
info:{
name:null,
address:{
street:null,
city:null,
country:null
}
}
}
},
mounted(){
axios.get("../data.json").then(response=>(this.info=response.data))
}
});
</script>
</html>data.json文件
{
"name":"狂神说java",
"url":"https://www.bilibili.com/video/BV18E411a7mC?p=9&vd_source=e353ca887193f19a3d6ede4c86ed70b4",
"page":1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country":"中国"
},
"links": [
{
"name": "bilibili",
"url":"https://www.bilibili.com"
},
{
"name": "狂神说java",
"url": "https://www.bilibili.com/video/BV18E411a7mC?p=9&vd_source=e353ca887193f19a3d6ede4c86ed70b4"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
扫一扫
1537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
