展示频道列表
先在 api目录下面文件封装请求方法
然后在 data里面定义变量用于存储数据
在 methods里定义获取数据方法。(页面导入这个方法,方法里面调用方法发送请求,请求成功赋值data里面变量)
在 created里面调用这个方法。
最后渲染。
api/user.js 里封装
export const getUserChannels = () => {return request({method: 'GET',url: '/v1_0/user/channels'})}
data里面定义变量
data(){return{channels:[]}}
methods定义方法
// 导入封装方法
import { getUserChannels } from '@/api/user'
methods: {
async loadChannels () {
try {
// 发请求
const { data } = await getUserChannels()
// 成功赋值
this.channels = data.data.channels
} catch (err) {
// 失败处理
this.$toast('获取频道数据失败')
}
}
}
生命周期created里面调用
created() {this.loadChannels()}
渲染数据
<van-tabs class="channel-tabs" v-model="active" swipeable animated border>
<van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
{{channel.name}}的内容
</van-tab>
</van-tabs>