v-for遍历对象、数组

简介: v-for遍历对象、数组

v-for遍历对象

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in message">{{item}}</li>
        </ul>
        
        <!-- 获取key和value (item,key)顺序不能变-->
        <ul>
            <li v-for="(item,key) in message">{{key}}-{{item}}</li>
        </ul>

        <!-- 解决互用问题-->
        <ul>
            <li v-for="(item,key) in message" :key="item">{{key}}-{{item}}</li>
        </ul>

        <!-- 获取index和key和value (item,key,index)顺序不能变--->
        <ul>
            <li v-for="(item,key,index) in message">{{index}}-{{key}}-{{item}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: {
                    name: "LSF",
                    age: 20,
                    height: 175
                }
            }
        })
    </script>
</body>
</html>

v-for遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="divrel">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>

        <!-- 在遍历时获取索引值 -->
        <ul>
            <li v-for="(item, index) in movies">{{index+1}}-{{item}}</li>
        </ul>
    </div>
</body>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#divrel',
            data: {
                movies:['星际穿越','大话西游','少年派','盗梦空间']
            }
        });
        app.movies.push('海王');
    </script>
</html>
目录
相关文章
|
11月前
|
机器学习/深度学习 算法 测试技术
3天把Llama训成Mamba,性能不降,推理更快!
【10月更文挑战第7天】论文《Distilling and Accelerating Hybrid Models》提出了一种将大型Transformer模型高效转化为线性RNN模型的新方法,通过重用注意力层中的线性投影权重,实现性能不降甚至提升。研究通过多阶段蒸馏方法训练模型,包括渐进蒸馏、监督微调和定向偏好优化,确保了模型在标准聊天基准测试中的优异表现。实验结果表明,蒸馏后的混合模型在多个任务上与原模型及同类模型相比,表现出色或更优。然而,该方法仍需大量计算资源,并在特定任务上可能存在性能差距。
132 1
|
SQL 分布式计算 Java
阿里云MaxCompute-Hive UDF(Java)迁移上云实践
阿里云MaxCompute-Hive UDF(Java)迁移上云实践
|
Android开发
fab按钮
牙叔教程 简单易懂
160 0
|
Java
(2)剑指Offer之二维数组查找和替换空格问题
在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。
1287 0
|
网络架构 应用服务中间件 网络安全
|
应用服务中间件 nginx
nginx模块开发获取post参数
> 您好!>     我想请问下nginx模块里面怎么获取post参数,能有具体的代码更好!谢谢> 对于 "application/x-www-form-urlencoded" 格式的 POST 参数获取,可以参考 ngx_lua 模块的ngx.
1940 0
|
8天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1196 4
|
7天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1073 60
|
6天前
|
机器学习/深度学习 物联网
Wan2.2再次开源数字人:Animate-14B!一键实现电影角色替换和动作驱动
今天,通义万相的视频生成模型又又又开源了!Wan2.2系列模型家族新增数字人成员Wan2.2-Animate-14B。
556 11