• v-for列表渲染

    一、v-for迭代数组

    1. <li v-for="(e,index) in emp" :key="e.id">
    2.    编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}
    3. li>
    • e 是循环数组中的每个元素的别名
    • index 是当前循环的下表，从0开始
    • :key 的作用： 是为了给 Vue 一个提示， 以便它可以跟踪每个节点的唯一标识，它会 基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素==

    运行效果如下：

    二、v-for 迭代对象

    1. <li v-for="(value,key,index) in user" :key="index">
    2.      第{{index+1}} 个属性为：{{key}} ={{value}}
    3. li>

     value是属性值，key是属性名，index索引值（从0开始）,运行效果如下：

     注意：循环的属性顺序在不同js引擎是不一定的，Object.keys()

    三、v-if和v-for同时使用时（注意）

    需求：  如果年龄大于6666不显示

    不推荐v-if和v-for同时作用到同一元素上

    作用在同一元素上：

    •      vue3: 会先执行v-if,再执行v-for
    •      vue2: 会先执行v-for,再执行v-if
    •      因为vue3和vue2执行的顺序不相同，不推荐v-if和v-for同时作用到同一元素上，使用在同一元素上会报如下错误：vue.global.js:1661 [Vue warn]: Property "e" was accessed during render but is not defined on instance. 

    解决方式：分开使用，不作用同一元素上

    eg:           

    1. <ul>
    2.   <template v-for="e in emp" :key="e.id">
    3.      <li v-if="e.age > 6666">
    4.         {{e.name}} - {{e.age}}
    5.      li>         
    6.     template>
    7. ul>

       *在template元素上循环，循环出来html查看不到template，会自动移除它

    完整代码例子：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>v-fortitle>
    7. head>
    8. <body>
    9.     <div id="app">
    10.         <h3>v-for迭代数组h3>
    11.         
    12.         <li v-for="(e,index) in emp" :key="e.id">
    13.             编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}
    14.         li>
    15.         <h3>v-for 迭代对象h3>
    16.         
    17.         <li v-for="(value,key,index) in user" :key="index">
    18.             第{{index+1}} 个属性为：{{key}} ={{value}}
    19.         li>
    20.         <h3>v-if和v-for同时使用时（注意）h3>
    21.         
    22.         <ul>
    23.             <template v-for="e in emp" :key="e.id">
    24.                 <li v-if="e.age > 6666">
    25.                     {{e.name}} - {{e.age}}
    26.                 li>
    27.                 
    28.             template>
    29.         ul>
    30.     div>
    31.     <script src="./node_modules/vue/dist/vue.global.js">script>
    32.     <script type="text/javascript">
    33.         const {createApp} = Vue;
    34.         const app=createApp({
    35.             data(){
    36.                 return{
    37.                     emp:[ //数组
    38.                         {id:0,name:'测试1',age:'555'},
    39.                         {id:1,name:'测试2',age:'6666'},
    40.                         {id:2,name:'测试3',age:'7777'}
    41.                     ],
    42.                     user:{ //对象
    43.                         account: 55555,
    44.                         password: 9988999
    45.                     }
    46.                 }
    47.             }
    48.         }).mount("#app");
    49.         console.log("app",app);
    50.     script>
    51. body>
    52. html>

  • 相关阅读:
    DataX更新null值到ElasticSearch不生效的问题
    【一起学Rust | 基础篇 | rust新特性】Rust 1.65.0——泛型关联类型、let-else语句
    【Unity3D】人体模型及动画
    初识C语言，新人介绍
    关于HarmonyOS元服务的主题演讲与合作签约
    测试一下Pinia，Vuex 要出局了？
    SpringBoot实现上传存储图片到七牛云服务器
    JAVA中的replace、replaceAll、replaceFirst方法的区别和使用
    spring boot +vue 博客系统，开源的资源网站
    可观测性-Metrics-Tomcat连接数、线程数理解以及压测记录
  • 原文地址：https://blog.csdn.net/QWERTY55555/article/details/133999719