• Vue 官方文档2.x教程学习笔记 1 基础 1.8 列表渲染 1.8.1 用 v-for 把一个数组对应为一组元素 ~ 1.8.3 维护状态

    Vue 官方文档2.x教程学习笔记

    文章目录

    1 基础

    1.8 列表渲染
    1.8.1 用 v-for 把一个数组对应为一组元素

    我们可以用 v-for 指令基于一个数组来渲染一个列表。

    v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<ul id="example-1">
    <li v-for="item in items" :key="items.message">
        {{item.message}}
    li>
ul>

<script src="../js/vue.js">script>
<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    })

script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    渲染效果：

    在这里插入图片描述

    在 v-for 块中，我们可以访问所有父作用域的 property。

    v-for 还支持一个可选的第二个参数，即当前项的索引。

      
  
    • 
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  
      • 

    

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    渲染效果：

    在这里插入图片描述

    也可以使用of 替代 in 作为分隔符，它更接近JavaScript 迭代器的语法

    在这里插入图片描述

    1.8.2 在 v-for 里使用对象

    可以用 v-for 来遍历一个对象的 property。

      
  
    • 
    {{ value }}
  
      • 

    

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    渲染效果

    在这里插入图片描述

    也可以提供第二个的参数为 property 名称 (也就是键名)：

    
  {{ name }}: {{ value }}

    

    • 1
    • 2
    • 3

    在这里插入图片描述

    还可以用第三个参数作为索引：

    
  {{ index }}. {{ name }}: {{ value }}

    

    • 1
    • 2
    • 3

    在这里插入图片描述

    在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

    1.8.3 维护状态

    当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。

    如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

    这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

    为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

    
  

    

    • 1
    • 2
    • 3

    也可以简写：key

    建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

    因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

    不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

    更多 key attribute 的细节用法请移步至 key 的 API 文档。

    在这里插入图片描述

  • 相关阅读:
    HTML静态网页作业——电影介绍-你的名字 5页 无js 带音乐
    PT_独立事件
    07.自定义指令传参小窍门
    Java开发学习(二十六)----SpringMVC返回响应结果
    java线程调度
    Linux vim
    面试官的一句话，让五年功能测试老手彻夜难眠！
    【我不熟悉的javascript】使用console.clear()清除控制台
    计算机专业毕业论文java毕业设计开题报告SSM医疗管理系统|住院医院[包运行成功]
    Python中学习调试requests模块时出现的大坑（1）
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/128197165