已解决
vue 生命周期钩子函数 created()案例
来自网友在路上 185885提问 提问时间：2023-10-23 19:11:13阅读次数： 85
最佳答案 问答题库858位专家为你答疑解惑
通过发请求来获取数据。在数据响应化之后，dom搭建之前，通过发送axios来获取数据并初始化。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item,index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{item.title}}</div><div class="info"><span>{{item.source}}</span><span>{{item.time}}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created() {const res = await axios.get("http://hmajax.itheima.net/api/news")this.list = res.data.data},})</script>
</body>
</html>
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"vue 生命周期钩子函数 created()案例"：http://eshow365.cn/6-22656-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！