钩子函数 created()案例"/>
vue 生命周期钩子函数 created()案例
通过发请求来获取数据。在数据响应化之后，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="@2/dist/vue.js"></script><script src=".min.js"></script><script>// 接口地址：// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created() {const res = await axios.get("")this.list = res.data.data},})</script>
</body>
</html>更多推荐
vue 生命周期钩子函数 created()案例
发布评论