Vue列表渲染

一、Vue列表渲染

1.用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {
  
  { item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果:

v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {
  
  { parentMessage }} - {
  
  { index }} - {
  
  { item.message }}
  </li>
</ul>

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

结果:

你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:

<div v-for="item of items"></div>
2.在v-for里使用对象

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

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {
  
  { value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果:

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

<div v-for="(value, name) in object">
  {
  
  { name }}: {
  
  { value }}
</div>

结果:

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

<div v-for="(value, name, index) in object">
  {
  
  { index }}. {
  
  { name }}: {
  
  { value }}
</div>

结果:

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

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

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

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

用index作为key可能会引发的问题:

1.若对数据进行:逆序添加、逆序删除等破坏顺序操作,

会产生没有必要的真实dom更新 ==> 界面效果没有问题,但效率低

2.如果结构中还包含输入类的DOM:

会产生错误DOM更新 ==> 界面有问题

开发中如何选择key

1.最好使用每条数据的唯一标识作为key,比如 id 手机号 身份证号码 学号等唯一值

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

二、数组更新检测

1.变更方法

Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

你可以打开控制台,然后对前面例子的 items 数组尝试调用变更方法。

比如 example1.items.push({ message: 'Baz' })

2.替换数组

变更方法,顾名思义,会变更调用了这些方法的原始数组。相比之下,也有非变更方法,例如 filter()concat()slice()。它们不会变更原始数组,而总是返回一个新数组。当使用非变更方法时,可以用新数组替换旧数组:

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

三、显示过滤/排序后的结果

有时,我们想要显示一个数组经过过滤或排序后的版本,而不实际变更或重置原始数据。在这种情况下,可以创建一个计算属性,来返回过滤或排序后的数组。

<li v-for="n in evenNumbers">{
  
  { n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个方法:

<ul v-for="set in sets">
  <li v-for="n in even(set)">{
  
  { n }}</li>
</ul>
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

四、在 v-for 里使用值范围

v-for 也可以接受整数。在这种情况下,它会把模板重复对应次数。

<div>
  <span v-for="n in 10">{
  
  { n }} </span>
</div>

结果:

五、在 < template > 上使用v-for

类似于 v-if,你也可以利用带有 v-for<template> 来循环渲染一段包含多个元素的内容。比如:

<ul>
  <template v-for="item in items">
    <li>{
  
  { item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

六、v-for 与 v-if 一同使用

注意我们推荐在同一元素上使用 v-ifv-for

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用,如下:

<li v-for="todo in todos" v-if="!todo.isComplete">
  {
  
  { todo }}
</li>

上面的代码将只渲染未完成的 todo。

而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (< template >) 上。如:

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {
  
  { todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

七、在组件上使用 v-for

在自定义组件上,你可以像在任何普通元素上一样使用 v-for。,当在组件上使用 v-for 时,key 现在是必须的。

<my-component v-for="item in items" :key="item.id"></my-component>
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/536413.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Agent调研--19类Agent框架对比

代理&#xff08;Agent&#xff09;指能自主感知环境并采取行动实现目标的智能体&#xff0c;即AI作为一个人或一个组织的代表&#xff0c;进行某种特定行为和交易&#xff0c;降低一个人或组织的工作复杂程度&#xff0c;减少工作量和沟通成本。 背景 目前&#xff0c;我们在探…

Qt 4.8中的ftp 功能在Qt 5.9.4 之前版本中的应用

很久以前也就是在Qt 4.8版本后&#xff0c; 如果想要用Qt ftp功能&#xff0c;是把Qt 4.8中的QFtp源码拉出来&#xff0c;编译、修改然后就能在Qt 其他版本使用。 但每一次升级Qt 版本&#xff0c;就要把Qt ftp 源码在相应的Qt 版本编译&#xff0c;修改。太麻烦了&#xff0c;…

C#下Httpclient post请求获取令牌

1.postman测试ok 2.C#代码 public static async Task<string> testGetToken(string URL, string param){string responseBody "eee";//using (var clientHandler new HttpClientHandler()){ var handler new HttpClientHandler();handler.ServerCertificat…

【JavaScript】对象 ② ( 对象使用 | 调用对象属性 | 调用对象方法 | 变量与属性区别 | 函数与方法区别 )

文章目录 一、对象使用1、使用字面量创建对象要点2、调用对象属性3、调用对象方法 二、变量与属性区别三、函数与方法区别 一、对象使用 1、使用字面量创建对象要点 使用字面量创建对象要点 : 在上一篇博客 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对…

Android Studio开发学习(六)———TableLayout(表格布局)、FrameLayout(帧布局)

目录 前言 一、Tablelayout &#xff08;一&#xff09;Tablelayout的相关简介 &#xff08;二&#xff09;TableLayout使用方法 1. 当TableLayout下面写控件、则控件占据一行的大小。(自适应一行&#xff0c;不留空白) 2.多个组件占据一行&#xff0c;则配合TableRow实现…

Redis中的集群(六)

集群 ASK错误 在进行重新分片期间&#xff0c;源节点向目标节点迁移一个槽的过程中&#xff0c;可能会出现这样一种情况:属于被迁移槽的一部分键值对保存在源节点里面&#xff0c;而另一部分键值对则保存在目标节点里面。当客户端向源节点发送一个与数据库有关的命令&#xf…

【PHP程序设计(高阶版)】——PHP操作MySQL教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

Linux Ubantu安装配置教程

Ubuntu是一个基于Linux的开源操作系统&#xff0c;它遵循GNU通用公共许可证&#xff0c;用户可以自由使用、复制、分发和修改。它提供直观易用的桌面环境&#xff0c;适合新手和有经验用户。Ubuntu有强大的软件中心&#xff0c;支持多硬件架构&#xff0c;注重安全和稳定&#…

Hidl 学习总结 2

1、Android apk 调用Hidl处理 app添加对应的hidl jar包 2、MainActivity 添加如下代码 package com.example.test2;import androidx.appcompat.app.AppCompatActivity; import vendor.hardware.test.V1_0.ITest; import vendor.hardware.test.V1_0.ITestCmdCallback; import …

【精品PPT】智慧路灯大数据平台整体建设实施方案(免费下载)

1、知识星球下载&#xff1a; 如需下载完整PPTX可编辑源文件&#xff0c;请前往星球获取&#xff1a;https://t.zsxq.com/19QeHVt8y 2、免费领取步骤&#xff1a; 【1】关注公众号 方案驿站 【2】私信发送 【智慧路灯大数据平台】 【3】获取本方案PDF下载链接&#xff0c;直…

前端之Vuex

主要解决租价之间传值的问题。 npm install vuex3/4state:用于存储应用程序的状态数据 mutations:用于修改状态数据&#xff0c;外部不要直接对state进行修改。 getter:对状态数据进行处理例如过滤操作。 action:异步操作&#xff0c;网络请求是异步操作&#xff0c;该步骤在a…

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅱ)搜索及数据获取配置项

搜索及数据获取配置项 搜索及数据获取配置项属性&#xff1a; noSearchModel&#xff08;无表单搜索标识&#xff09;属性&#xff1a;changeToSearch&#xff08;表单change事件是否触发搜索 &#xff09;属性&#xff1a; changeParams&#xff08;参数预处理【可异步】 &…

智慧园区平台再升级!智慧迭代,服务升级

伴随物联网、人工智能等技术的迅速发展和智能化水平的提高&#xff0c;智慧园区成为了现代区域经济高质量发展的重要组成部分&#xff0c;上承智慧城市的建设&#xff0c;下接智慧运营和管理。智慧园区是一种基于信息技术的智能化管理模式&#xff0c;通过物联网、大数据、人工…

Day05-SHELL自动化编程-数组-三剑客进阶

Day05-SHELL自动化编程-数组-三剑客进阶 14 Shell编程-数组14.1 概述14.2 Shell数组赋值14.3 案例14.4 小结 15. Shell-编程-Debug全流程15.1 书写习惯15.2 调试方法 16. 再战三剑客16.1 sed与变量16.2 awk1&#xff09;指哪打哪-案例2&#xff09;awk的判断与循环3&#xff09…

【HDFS存储】Java语言实现

Hadoop生态系统中包含多种与其相关联的技术应用&#xff0c;主要包括但不限于HDFS HDFS&#xff08;Hadoop Distributed File System&#xff09;&#xff1a;作为一个高度可靠、高吞吐量的分布式文件系统&#xff0c;它是Hadoop核心技术之一&#xff0c;用于存储海量数据。 J…

ubuntu如何截图? ubuntu中截屏的三种方法

文章目录 1.ubuntu主要用途2.ubuntu如何截图&#xff1f;2.1 方法一&#xff1a;键盘按键快捷键截屏 2.2 方法二&#xff1a;系统自带软件2.3 方法三&#xff1a;第三方软件 Reference 1.ubuntu主要用途 1、桌面操作系统&#xff1a;Ubuntu可用作个人电脑或笔记本电脑的操作系…

将Ubuntu18.04默认的python3.6升级到python3.8

1、查看现有的 python3 版本 python3 --version 2、安装 python3.8 sudo apt install python3.8 3、将 python3.6 和 3.8 添加到 update-alternatives sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.6 1 sudo update-alternatives --insta…

【C++】1.从C语言转向C++

目录 一.对C的认识 二.C的关键字 三.命名空间 3.1命名空间的定义 3.2命名空间的使用 四.C的输入与输出 五.缺省参数 5.1全缺省参数 5.2半缺省参数 六.函数重载 七.引用 7.1引用的特性 7.2引用和指针的区别 八.内联函数 九.auto关键字&#xff08;C1…

聚焦价值提升与市场扩张,ATFX任命Ergin Erdemir为拉丁美洲地区负责人

日前&#xff0c;全球知名品牌ATFX宣布一项重磅人事任命&#xff0c;Ergin Erdemir履新拉丁美洲地区负责人。我们相信通过这一重要战略举措&#xff0c;能够加强品牌在全球最具活力地区之一的拉美业务增长的承诺&#xff0c;并巩固品牌在当地的知名度和影响力。 Ergin Erdemi…

【noVNC】使用noVNC实现浏览器远程VNC(基于web的远程桌面)

一、操作的环境 windows 10系统乌班图 Ubuntu 22 二、noVNC 部署方式 原理&#xff1a;开启 Websockify 代理来做 WebSocket 和 TCP Socket 之间的转换 2.1 noVNC和VNC服务端同一台机器 使用方式&#xff0c;查看另一篇博文 &#xff1a;【noVNC】使用noVNC实现浏览器网页访…