使用for循环渲染出一排盒子,数据为模拟数据:
<template>
<view class="someList" v-for="(item, index) in fiveList">
<text>{
{item.name}}</text>
<text>{
{item.image}}</text>
</view>
</template>
<script>
export default{
data(){
return{
fiveList: [{
imgs: '/images/new1.png',
text: '示例1',
},
{
imgs: '/images/new2.png',
text: '示例2',
},
{
imgs: '/images/new3.png',
text: '示例3',
}
],
}
}
}
</script>
调用接口,使用真实数据,只需要一个空数组来接受回参res即可,比如我们需要在页面加载时就开始渲染数据:
onShow() {
//主页加载时调用接口获取数据并渲染
const data = {
//接口入参
custom_app_key: 'appKey',
// session_3rd: getStorage("session"), // 微信信息标识
}
GetProject(data).then(res => {
console.log("成功")
//赋值数组参数,替换静态数组
this.fiveList = res
console.log(res);
}).catch(res => {
console.log("失败");
})
}
使用时依旧可以插值语法,例如 { {item.name}}的形式来渲染。