html渲染接口中的值,Vue通过引入cdn方式请求接口,渲染数据,axios渲染数据

这个不需要npm搭建脚手架安装Vue,只需要简单引入Vue的cdn链接,即可实现,通过引入Axios进行渲染数据到html页面。

index.html

Vue axios 渲染数据

[v-cloak] {

display: none;

}

Vue Cdn Axios 渲染数据

{{ site.title }}

{{ site.url }}

new Vue({

el: '#app',

data () {

return {

info: null

}

},

mounted () {

axios

.get('./data.json')

.then(response => (this.info = response.data.list)) // 把结果集传到info这个数组

.catch(function (error) {

console.log(error);

});

}

})

data.json{

"list": [

{ "title":"百度一下,你就知道","url":"www.baidu.com"},

{ "title":"让天下没有难做的生意","url":"www.taobao.com"},

{ "title":"再小的个体,也是一个品牌","url":"www.weixin.com"}

]

}

demo

8d62a9f60cabe79e5b19902755855641.png

Author:TANKING

Web:http://www.likeyun.cn/

Date:2020-11-11

WeChat:face6009

b739ec46bb5c46d9c0aa4ce35ba1ea56.png

关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。

[Vue通过引入cdn方式请求接口,渲染数据,axios渲染数据]http://www.zyiz.net/tech/detail-148904.html

原文链接:https://blog.csdn.net/weixin_34366539/article/details/117863697?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816780357282901%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816780357282901&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-30-117863697-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/6059

(0)
上一篇 2022年9月29日
下一篇 2022年9月29日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml