【vue-4】遍历数组或对象v-for

1、遍历数组

<ul><li v-for="(value,index) in web.number">index=>{{index}}:value=>{{value}}</li>
</ul>

知识点:

<ul>标签定义无序列表

举例:

<ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>

2、遍历对象

<li v-for="(value,key,index) in web.user">index=>{{index}}:key=>{{key}}:value=>{{value}}
</li>

3、遍历含多条数据的对象

<li v-for="(value,index) in web.teacher">index=>{{index}}:id=>{{value.id}}:name=>{{value.name}}:web=>{{value.web}}:
</li>

4、v-for与v-if叠加使用:

<template v-for="(value,key,index) in web.user"><li v-if="index==1">index=>{{index}}:key=>{{key}}:value=>{{value}}
</template>

<template>标签定义模板的片段,使用v-if或v-for来控制渲染。

5、v-for叠加动态绑定:

<li v-for="(value,index) in web.teacher" :title="value.name" :key="value.id">index=>{{index}}:id=>{{value.id}}:name=>{{value.name}}:web=>{{value.web}}:
</li>

 完整示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="vue.global.js"></script> --></head>
<body><div id="app"><ul><!-- 遍历数组 --><li v-for="(value,index) in web.number">index=>{{index}}:value=>{{value}}</li><!-- 遍历对象 --><template v-for="(value,key,index) in web.user"><li v-if="index==1">index=>{{index}}:key=>{{key}}:value=>{{value}}</template><!-- 遍历多个元素的对象 --><li v-for="(value,index) in web.teacher" :title="value.name" :key="value.id">index=>{{index}}:id=>{{value.id}}:name=>{{value.name}}:web=>{{value.web}}:</li></ul></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项,用于设置响应式数据和方法等setup(){ const web = reactive({number:[11, 12, 13],user:{ //对象name:"lihua",gender:"女"},teacher:[{id:0,name:"zhangsan",web:"qq.com"},{id:1,name:"李四",web:"tiantian.com"}]})return{web     }}}).mount("#app")// mount为挂载</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/334294.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

本地部署Whisper实现语言转文字

文章目录 本地部署Whisper实现语言转文字1.前置条件2.安装chocolatey3.安装ffmpeg4.安装whisper5.测试用例6.命令行用法7.本地硬件受限&#xff0c;借用hugging face资源进行转译 本地部署Whisper实现语言转文字 1.前置条件 环境windows10 64位 2.安装chocolatey 安装chocol…

java项目级云MES源码(制造执行系统) springboot + vue-element-plus-admin生产制造业MES系统源码

java项目级云MES源码&#xff08;制造执行系统) springboot vue-element-plus-admin生产制造业MES系统源码 MES系统通过信息传递对从订单下达到产品完成的整个生产过程进行优化管理。当工厂发生实时事件时&#xff0c;MES制造执行系统功能的发挥重点体现在及时做出反应、报告&…

家政保洁服务小程序怎么做?家政公司快速搭建专属小程序

在数字化时代背景下&#xff0c;家政保洁服务行业也迎来了线上转型的新机遇。家政保洁服务小程序&#xff0c;作为一种新型的线上服务平台&#xff0c;不仅能够提升家政公司的服务效率&#xff0c;还能为顾客提供更加便捷的预约上门服务体验。那么家政保洁服务小程序怎么做呢&a…

nginx 安全配置

1、前言 前后端分离后&#xff0c;nginx 作为跨域转发工具在日常应用中越来越广泛&#xff0c;它的安全性不能不能忽略。 2、nginx 安装相关说明 2.1 直接下载安装包 在nginx官网下载编译好的安装包&#xff0c;链接地址为nginx: download。如果是linux系统&#xff0c;直接使…

【umi-max】初识 antd pro

修改端口号 根目录下的 .env 文件&#xff1a; PORT8888目录结构 (umijs.org) 新增页面 在 umirc.ts 中进行配置。 新增页面 - Ant Design Pro 这里有一个配置 icon:string&#xff0c;可以在菜单加 icon 图标&#xff0c;默认使用 antd 的 icon 名&#xff0c;默认不适用二…

大咖论道,智慧档案编研知识共享

关注我们 - 数字罗塞塔计划 - 本期直播全程“回放”&#xff0c;主题分享以视频形式&#xff0c;专家们的观点以文字形式&#xff0c;便于细读和收藏。 一、主题分享 详细视频请在 公众号 数字罗塞塔计划 中观看 二、大咖论道 以下内容整理来自直播间&#xff0c;上海市…

多模态MLLM都是怎么实现的(9)-时序LLM是怎么个事儿?

时序预测这东西大家一般不陌生,随便举几个例子 1- 金融,比如预测股票(股市有风险,入市需谨慎),纯用K线做,我个人不太推荐 2- 天气,比如预测云图,天气预报啥的 3- 交通,早晚高峰,堵车啥的,车啥时候加油,啥时候充电之类的 4- 医疗,看你病史和喝酒的剂量建模,看你会…

软件测试经理工作日常随记【6】-利用python连接禅道数据库并自动统计bug数据到钉钉群

测试管理_利用python连接禅道数据库并统计bug数据到钉钉 这篇不多赘述&#xff0c;直接上代码文件。 另文章基础参考博文&#xff1a;参考博文 加以我自己的需求优化而成。 统计的前提 以下代码统计的前提是禅道的提bug流程应规范化 bug未解决不删除bug未关闭不删除 db_…

前端项目使用docker编译发版和gitlab-cicd发版方式

项目目录 app/ ├── container/ │ ├── init.sh │ ├── nginx.conf.template ├── src/ ├── .gitlab-ci.yml └── deploy.sh └── Dockerfile └── Makefilecontainer目录是放nginx的配置文件&#xff0c;给nginx镜像使用 .gitlab-ci.yml和Makefile是c…

什么是死锁,如何解决?

一、问题解析 死锁是指两个或两个以上的进程&#xff08;或线程&#xff09;在执行过程中&#xff0c;由于竞争资源或者由于彼此通信而造成的一种阻塞的现象&#xff0c;若无外力作用&#xff0c;它们都将无法推进下去。此时称系统处于死锁状态或系统产生了死锁&#xff0c;这些…

Vue热更新出现内存溢出

Vue热更新出现内存溢出 vue-cli2遇到此问题的解决办法&#xff1a;vue-cli3遇到此问题的解决办法&#xff1a;方法一&#xff08;已测试ok&#xff09;方法二&#xff08;未尝试&#xff09; 开发项目有一段时间了&#xff0c;随着项目越来越大&#xff0c;打包的时间也相应的变…

用大模型搭建一个自己的新闻小助手

背景 信息快速增长的时代&#xff0c;及时获取到有价值的资讯是一件很必要的事情。已经有各类新闻app和获取信息的渠道了&#xff0c;为什么还需要在构建一个小助手来获取新闻资讯呢&#xff1f;其实原因很简单各类新闻app服务的是具体一类人群&#xff0c;个人和人群还是有偏…

python练习题-反转一个只有三位数的整数

【问题描述】&#xff1a;反转一个只有三位数的整数 [示例]&#xff1a;123 321 完整代码如下&#xff1a; nint(input()) if n<100 or n>999: print("请输入三位数&#xff01;") else: gen%10 shin//10%10 bain//100 m100*ge10*shibai…

瓦罗兰特账号怎么注册 瓦罗兰特延迟高用什么加速器

《瓦罗兰特》&#xff08;Valorant&#xff09;是由拳头游戏&#xff08;Riot Games&#xff09;开发并发行的一款免费的多人在线第一人称射击游戏&#xff08;FPS&#xff09;&#xff0c;它结合了传统的硬核射击机制与英雄角色的能力系统&#xff0c;为玩家提供了独特的竞技体…

5.28 学习总结

一.CSS学习(一) 一、CSS简介 1、什么是CSS CSS&#xff1a;Cascading Style Sheet 层叠样式表是一组样式设置的规则&#xff0c;用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离&#xff0c;便于团队开发样式复用&#xff0c;便于网站的后期维护页面的精确…

B站广告推广引流哪里能做?

哔哩哔哩&#xff08;B站&#xff09;作为国内领先的年轻人文化社区与视频平台&#xff0c;其独特的二次元文化氛围和高度活跃的用户群体&#xff0c;成为了众多品牌寻求突破、触达年轻消费群体的理想阵地。在这样一个充满活力但又竞争激烈的平台上有效推广&#xff0c;吸引并留…

ARM架构与分类

ARM架构&#xff0c;曾称进阶精简指令集机器&#xff08;Advanced RISC Machine&#xff09;更早称作Acorn RISC Machine&#xff0c;是一个32位精简指令集&#xff08;RISC&#xff09;处理器架构。 主要是根据FPGA zynq-7000的芯片编写的知识思维导图总结&#xff0c;没有会…

Java学习四

Random 随机数 数组 静态初始化数组 数组在计算机中的基本原理 数组的访问 什么是遍历 数组的动态初始化 动态初始化数组元素默认值规则 Java内存分配介绍 数组在计算机中的执行原理 使用数组时常见的一个问题 案例求数组元素最大值 public class Test1 {public static void ma…

白酒:产地的水资源与酿酒工艺的关联性

云仓酒庄豪迈白酒的酿造过程中&#xff0c;水资源与酿酒工艺之间存在着密切的关联性。水是白酒酿造的重要原料之一&#xff0c;其质量和数量直接影响着酿酒工艺的实施和酒的品质。下面我们和云仓酒庄豪迈白酒来深入探讨一下&#xff0c;产地的水资源如何与酿酒工艺产生关联。 首…