首页 > 其他分享 >Vue 列表渲染

Vue 列表渲染

时间:2024-12-30 21:07:58浏览次数:1  
标签:index Vue name 渲染 age 列表 遍历 id

一、基础

1、v-for用来展示列表数据

2、语法 v-for="(value, index) in xx" :key="index"

3、可遍历:数组、对象、字符串

注意:先是值,再是索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-基础</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <h2>人员信息</h2>
        <ul>
            <li v-for="(p, index) in personArr" ::key="p.id">
                {{p.name}}-{{p.age}}--{{index}}
            </li>
        </ul>
        <h2>遍历对象</h2>
        <ul>
            <li v-for="(value, key, index) in personObj" :key="index">
                {{index}}-{{key}}-{{value}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#container",
            data:{
                // 遍历数组
                personArr:[
                    {id:"01", name:"张三", age:"40"},
                    {id:"02", name:"李四", age:"41"},
                    {id:"03", name:"王五", age:"42"},
                ],
                //遍历对象
                personObj:{
                    name:"王二麻子",
                    age:40,
                    sex:"男"
                }
            }
        })
    </script>
</body>
</html>

 

标签:index,Vue,name,渲染,age,列表,遍历,id
From: https://www.cnblogs.com/wt7018/p/18642433

相关文章

  • Vue 条件渲染
    一、v-show写法:v-show="表达式"适用于切换频率较高的场景特点:不展示的DOM元素未被移除,仅仅是隐藏<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-......
  • vue 父子组件的生命周期渲染顺序
    在Vue中,父子组件的生命周期钩子函数执行顺序遵循一定的规则。以下是父子组件渲染时的生命周期调用顺序:父子组件渲染顺序父组件beforeCreate父组件created父组件beforeMount子组件beforeCreate子组件created子组件beforeMount子组件mounted父组件mounted更新......
  • ssm实验室预约管理+vue(10871)
     有需要的同学,源代码和配套文档领取,加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码(前后端源代码+SQL脚本)配套文档(LW+PPT+开题报告)远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项......
  • 前端开发vue开发调试源代码
    vue开发调试源代码1.main.js添加Vue.config.devtools=true//Vue.config.productionTip=falseVue.config.devtools=true2.vue.config.js添加devtool:'source-map'module.exports={ productionSourceMap:true, configureWebpack:{ devtool:'source-......
  • Python+Django大学生入伍人员管理系统--(Pycharm Flask Django Vue mysql)
    收藏关注不迷路!!需要的小伙伴可以发链接或者截图给我项目介绍大学生入伍人员管理系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品,体验高科技时代带给人们的方便,同时也能让用户体会到与以往常规产品不同的体验风格。......
  • 基于springboot+vue的滑雪场雪具租赁服务系统
    收藏关注不迷路!!......
  • 基于springboot+vue的物流管理系统_91758695_053
    收藏关注不迷路!!......
  • Python+Django家政服务预约系统\搬家服务预约系统--(Pycharm Flask Django Vue mysql
    收藏关注不迷路!!需要的小伙伴可以发链接或者截图给我项目介绍基于Python+Django的家政保洁预约服务平台的开发背景,深植于现代生活节奏的加快、消费习惯的变化以及数字化转型的浪潮之中在快节奏的现代生活中,越来越多的家庭面临着工作与家庭生活的双重压力。传统的家庭清洁、......
  • Python+Django宠物援助平台\宠物领养系统\宠物服务寻找丢失宠物--(Pycharm Flask Dj
    收藏关注不迷路!!需要的小伙伴可以发链接或者截图给我项目介绍基于Python+Django的流浪动物宠物救助援助平台的开发背景,深刻反映了当代社会对动物福利的关注提升、技术进步的赋能作用,以及社会公益需求的日益增长。近年来,随着社会的进步和人们文化素质的提高,越来越多的公众开......
  • store(vuex响应式数据)
    store.js文件是一个Vuex状态管理库的配置文件,用于在Vue应用中集中管理状态(数据)和行为(方法)。它使得不同组件之间可以共享和响应状态的变化。下面是对store.js文件的详细解释:1.State(状态)conststate=()=>({addData:{}//用于存储res数据});state是Vuex......