关于VUE3的数据

article/2024/6/13 21:15:18

接口请求出来的数据一般为对象类型的

这里有三种方法存储数据:

  1. ref

  1. reactive([])不太推荐

  1. 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()


http://www.ngui.cc/article/show-1007548.html

相关文章

2023-03-25 Android app 通过蓝牙(BLE低功耗蓝牙)实现设备间通讯的一个可用实例

一、两台android 手机之间的ble 蓝牙通信&#xff0c;不要蓝牙匹配&#xff0c;也是可以互传数据。 二、主要代码参考下面的文章&#xff1a; 1、主要参考 Android通过蓝牙&#xff08;BLE低功耗蓝牙&#xff09;实现设备间通讯 | 客户端 | 服务端_蓝牙beaon server_Code-Por…

TiDB K8S

1、 命名空间 k create ns ti k create namespace tidb-admin k create namespace tidb-clusteralias kkubectl alias tik -n tidb alias tiak -n tidb-admin alias tick -n tidb-cluster2、 Helm安装 tidb-operator helm repo add pingcap https://charts.pingcap.org/ helm…

论文解读:PP-LiteSeg: A Superior Real-Time Semantic Segmentation Model

发表时间&#xff1a;2022 论文地址&#xff1a;https://arxiv.org/abs/2204.02681 项目地址&#xff1a;https://github.com/PaddlePaddle/PaddleSeg PP-LiteSeg&#xff0c;一个新的轻量级实时语义分割任务模型&#xff0c;在分割精度和推理速度之间实现了一种最先进的权衡…

考研复试——概率论(2)

文章目录概率论1. 什么是概率&#xff1f;请给出定义并解释它。2. 什么是条件概率&#xff1f;请举一个例子并解释。3. 什么是贝叶斯定理&#xff1f;请举一个例子并解释。4. 什么是期望值和方差&#xff1f;请解释这些概念及其在统计学和概率论中的应用。5. 什么是随机变量&am…

Netty进阶《ChannelPoolMap源码分析》

ChannelPoolMap是用来存储ChannelPool和指定key的一个集合Map&#xff0c;实际的应用场景就是服务器端是一个分布式集群服务&#xff0c;拥有多个配置地址&#xff0c;这样我们就可以配置多个服务地址&#xff0c;减轻单台服务器的压力&#xff1b;Netty框架提供了ChannelPoolM…

从零开始学习目标检测:YOLO算法详解

从零开始学习目标检测&#xff1a;YOLO算法详解 文章目录从零开始学习目标检测&#xff1a;YOLO算法详解1. &#x1f31f;什么是目标检测?2.&#x1f31f;传统的目标检测与基于深度学习的目标检测3.&#x1f31f;目标检测算法的工作流程4.&#x1f31f;目标检测可以干什么&…

【华为OD机试 2023最新 】 最优资源分配(C++)

文章目录 题目描述输入描述输出描述备注用例题目解析C++题目描述 某块业务芯片最小容量单位为1.25G,总容量为M*1.25G,对该芯片资源编号为1,2,…,M。该芯片支持3种不同的配置,分别为A、B、C。 配置A:占用容量为 1.25 * 1 = 1.25G配置B:占用容量为 1.25 * 2 = 2.5G配置C…

车机娱乐系统

BYD哪吒理想蔚来小鹏埃安吉利(魅族)大众 MQB大众MEB奥迪娱乐主机内置TboxYes生产商惠州比亚迪电子有限公司惠州市德赛西威汽车电子股份有限公司惠州市德赛西威汽车电子股份有限公司伟创力电脑&#xff08;苏州&#xff09;有限公司比亚迪汽车工业有限公司铁将军汽车电子股份有限…

数据结构与算法二 算法分析

一 算法分析 前面我们已经介绍了&#xff0c;研究算法的最终目的就是如何花更少的时间&#xff0c;如何占用更少的内存去完成相同的需求&#xff0c;并且也通过案例演示了不同算法之间时间耗费和空间耗费上的差异&#xff0c;但我们并不能将时间占用和空间占用量化&#xff0c…

【kuangbin计划】简单DP(1-3题 java/c++双语言详细解析)

本意是同时提供java以及c两种语言的代码的题解 但是无奈oj网站一直欺负java语言慢&#xff0c; 因此本篇题解部分java代码只提供思路参考 不提供语言优化&#xff0c;有兴趣的同学可以自行优化java版本 过不了的java语言均已注明&#xff01; 目录 4546. 最大和加强加强版 - 线…