【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.mzph.cn/web/17763.shtml

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

相关文章

Windows UWP ContentDialog去掉阴影(全透明)的实现

一、前言 在WIndows开发中&#xff0c;使用UWP&#xff08;Universal WIndows&#xff09;项目开发过程中&#xff0c;使用ContentDialog 的过程中&#xff0c;我们可能并不满足现有的样式&#xff0c;这时就需要自定义样式。笔者在自定义样式过程中&#xff0c;遇到了一个难题…

使用prometheus监测MySQL主从同步状态方案

说明&#xff1a;本文介绍如何使用prometheus、alertmanager监测MySQL主从&#xff0c;当从节点中断同步时&#xff0c;发送邮箱报警&#xff0c;并使用grafana将数据视图化。 结构图如下&#xff1a; 安装 &#xff08;1&#xff09;安装应用 首先&#xff0c;来安装promet…

【Linux】线程安全及锁的使用

文章目录 前言一、锁1.定义一个锁变量2.pthread_mutex_init3.pthread_mutex_destroy4.pthread_mutex_lock/pthread_mutex_unlock5.静态变量锁和全局变量锁的初始化 二、问题描述及锁的运用三、RAII风格的锁 前言 临界资源: 在多个线程或进程间共享的资源. 临界区: 代码中访问临…

5 分钟快速上手图形验证码,防止接口被恶意刷量!

5 分钟快速上手图形验证码&#xff0c;防止接口被恶意刷量&#xff01; 大家好&#xff0c;我是程序员小白条&#xff0c;今天来给大家介绍一个快速实现图形验证码的优秀框架 AJ-Captcha。 需求分析 如果注册接口没有验证码这种类型的限制&#xff0c;很容易会被刷量&#x…

protobuf —— 快速上手

protobuf —— 快速上手 创建 .proto 文件添加注释指定proto3语法package 声明符定义消息&#xff08;message&#xff09; 定义消息字段字段定义基本格式字段名称命名规范字段类型字段唯一编号示例 转换关系示例&#xff1a;增加姓名和年龄字段 字段唯一编号字段编号范围编码效…

英伟达SSD视觉算法,jetson.inference在jetson nano中部署

一、用官方镜像刷机 安装SD卡擦除工具SD Card Formatter https://www.sdcardformatter.com/download/ 格式化SD卡 下载官方镜像 https://developer.nvidia.com/jetson-nano-sd-card-image 安装刷机工具balenaEtcher https://www.balena.io/etcher 将上面下载的镜像压缩包解…

spark的简单学习二

一 spark sql基础 1.1 Dataframe 1.介绍&#xff1a; DataFrame也是一个分布式数据容器。然而DataFrame更像传统数据库的二维表 格&#xff0c;除了数据以外&#xff0c;还掌握数据的结构信息&#xff0c;即schema。同时&#xff0c;与Hive类似&#xff0c;DataFrame也支 持…

gin框架精通篇(二)

原生数据库使用 导入模块&#xff1a;go get -u github.com/go-sql-driver/mysql 安装 mysql 数据库 安装数据库可能遇到的问题&#xff1a;&#xff08;网上的方法基本可以解决&#xff09; ERROR 1045 (28000): Access denied for user ‘-root’‘localhost’ (using passwo…

HTML 页面布局

慢慢生活&#xff0c;慢慢变好 —— 24.5.28 页面布局 盒子: 页面中所有的元素(标签)&#xff0c;都可以看做是一个盒子&#xff0c;由盒子将页面中的元素包含在一个矩形区域内&#xff0c;通过盒子的视角更方便的进行页面布局 盒子模型组成: 内容区域(content)、内边距区域(pa…

React中useRef的使用

在 React 中&#xff0c;useRef 是一个钩子&#xff0c;用于返回一个可变的 ref 对象&#xff0c;其 .current 属性被初始化为传递的参数&#xff08;initialValue&#xff09;。这个返回的对象在组件的整个生命周期内保持不变。useRef 可以用来直接访问 DOM 元素或存储任何不会…

Oracle逻辑备库异构平台支持列表

关于oracle逻辑备库支持的OS平台列表&#xff0c;以及oracle DG主备版本支持情况&#xff0c;通过参考oracle 官方文档来做个整理总结&#xff0c;希望能帮到大家。 ​一.Oracle逻辑备库异构平台支持列表 oracle DG是否异构是通过platform_id来判断&#xff0c;通过查询v$dat…

UOS开通22端口用于SSH

主机虚拟机能相互ping通&#xff0c;但是mobaxterm等(远程ssh软件)连接不了 原因很有可能是虚拟机未安装SSH服务 检测是否已安装ssh服务&#xff0c;输入以下命令 ssh localhost 如果出现&#xff1a; ssh: connect to host localhost port 22: Connection refused 表明没有…

数据结构的希尔排序(c语言版)

一.希尔排序的概念 1.希尔排序的基本思想 希尔排序是一种基于插入排序算法的优化排序方法。它的基本思想如下: 选择一个增量序列 t1&#xff0c;t2&#xff0c;......&#xff0c;tk&#xff0c;其中 ti > tj, 当 i < j&#xff0c;并且 tk 1。 按增量序列个数k&#…

Centos安装,window、ubuntus双系统基础上安装Centos安装

文章目录 前言一、准备工作二、开始安装1、2、首先选择DATE&TIME2、选择最小安装3、 选择安装位置 总结 前言 因工作需要&#xff0c;我需要在工控机上额外装Centos7系统&#xff0c;不过我是装在机械硬盘上了不知道对性能是否有影响&#xff0c;若有影响&#xff0c;后面…

基于C#开发web网页管理系统模板流程-主界面管理员入库和出库功能完善

前言 紧接上篇->基于C#开发web网页管理系统模板流程-主界面管理员录入和编辑功能完善-CSDN博客 本篇将完善主界面的管理员入库和出库功能&#xff0c;同样的&#xff0c;管理员入库和出库的设计套路适用于动态表的录入和编辑 首先还是介绍一下本项目将要实现的功能 &#xf…

【sass数据类型简介以及使用方法】

Sass&#xff08;Syntactically Awesome Stylesheets&#xff09;是一种CSS预处理器&#xff0c;它允许你使用变量、嵌套规则、混合&#xff08;mixin&#xff09;、函数等功能来编写更易于维护和组织的CSS代码。Sass具有自己的数据类型系统&#xff0c;这些数据类型在编写Sass…

[Android]项目打包APK时报错PKCS12 keystore not in version 3 format

报错&#xff1a; PKCS12 keystore not in version 3 format Execution failed for task :app:packageRelease. > A failure occurred while executing com.android.build.gradle.tasks.PackageAndroidArtifact$IncrementalSplitterRunnable > com.android.ide.commo…

如何使用 FastAPI 部署 NLP 模型?

模型部署是将训练好的自然语言处理模型集成到生产环境中的过程。模型接收输入数据&#xff0c;预测输出。 有多种将 NLP 模型部署到生产环境的方法&#xff0c;包括 Flask、Django、Bottle 等框架。 本文将分享使用 FastAPI 构建和部署 NLP 模型。 在本文中&#xff0c;你将…

揭开Java序列化的神秘面纱(上)Serializable使用详解

Java序列化(Serialization)作为一项核心技术&#xff0c;在Java应用程序的多个领域都有着广泛的应用。无论是通过网络进行对象传输&#xff0c;还是实现对象的持久化存储&#xff0c;序列化都扮演着关键的角色。然而&#xff0c;这个看似简单的概念蕴含着丰富的原理和用法细节&…

如何为个人网站部署SSL安全证书,以实现网站的 HTTPS 加密协议访问?

哈喽&#xff0c;大家好呀&#xff01;这里是码农后端。完成了域名的备案与解析后&#xff0c;就可以通过域名来访问我们的网站了。本篇将介绍如何为我们的网站部署SSL安全证书&#xff0c;实现网站的 HTTPS 加密协议访问。 1、购买SSL证书 未进行SSL证书部署&#xff0c;访问网…