接口请求出来的数据一般为对象类型的
这里有三种方法存储数据：
ref
reactive([])不太推荐
reactive（[]）嵌套一个对象去存储，推荐
1、ref
<template>
<van-swipe :autoplay="3000"lazy-render>
<van-swipe-itemv-for="(image,index) in images" :key="index">
<img :src="image.pic"/>
</van-swipe-item>
</van-swipe>
</template>
<script>
import{onMounted,reactive,ref} from 'vue'
import{postBanner} from '@/api/index'
export default {
setup() {
let images = ref([])
onMounted(async()=>{
getSwipeAPI()
})
async function getSwipeAPI(){
images.value = await postBanner(1)
}
console.log(images);
return { images };
},
}
</script>
2、reactive([]) 通过push存储，不推荐
<template>
<divv-for="(image,index1) in images3" :key="index1">
<van-swipe :autoplay="3000"lazy-render>
<van-swipe-itemv-for="(i,index) in image" :key="index">
<img :src="i" />
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
import{onMounted,reactive,ref} from 'vue'
import {postBanner}from '@/api/index'
export default {
setup() {
let images3 = reactive([])
onMounted(async()=>{
getSwipeAPI()
})
async function getSwipeAPI(){
let x = await postBanner(1)
x = x.map(v=>v.pic)
images3.push(x)
}
console.log(images3);
return {images3};
},
}
</script>
3、reactive（[]）嵌套对象
<template>
<van-swipe :autoplay="3000"lazy-render>
<van-swipe-itemv-for="(image,index) in images2.list" :key="index">
<img :src="image.pic"/>
</van-swipe-item>
</van-swipe>
</template>
<script>
import{onMounted,reactive,ref} from 'vue'
import{postBanner} from '@/api/index'
export default {
setup() {
let images2 = reactive({
list:[]
})
onMounted(async()=>{
getSwipeAPI()
})
async function getSwipeAPI(){
images2.list = await postBanner(1)
}
return {images2};
},
}
</script>
推荐使用reactive()