我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue.js中怎么利用v-for循环实现渲染

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue.js中怎么利用v-for循环实现渲染

本篇文章为大家展示了vue.js中怎么利用v-for循环实现渲染,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

一、简介

vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同。

(一)遍历对象

<div id="app">
  <ul>
    <li v-for="(val, key, index) in me">{{index}}. {{key}}: {{val}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    me: {
      name: 'Dale',
      age: 22,
      sex: 'male',
      height: 170
    }
  }
});

这里,v-for 接收的参数相对较复杂,但是可以分为三个部分:

(1)括号及其内的遍历结果信息(val, key, index)

其中,val 是遍历得到的属性值,key 是遍历得到的属性名,index 是遍历次序,这里的 key/index 都是可选参数,如果不需要,这个指令其实可以写成 v-for="val in me";

(2)遍历关键词 in

in 可以使用 of 替代,官方的说法是“它是最接近 JavaScript 迭代器的语法”,但其实使用上并没有任何区别;

(3)被遍历对象 me

me 是绑定在实例 data属性上的一个属性,实际上,它是有一个执行环境的,也即是我们接触最多的 vue 实例,模板中,我们仍旧可以像在 methods 以及计算属性中一样,通过 this 访问到它,这里的 me 其实就相当于 this.me,模板中直接写 this.me 也是可行的。

渲染结果如下:

<div id="app">
  <ul>
    <li>0. name: Dale</li>
    <li>1. age: 22</li>
    <li>2. sex: male</li>
    <li>3. height: 170</li>
  </ul>
</div>

(二)遍历数组

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}}. {{item}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    items: ['apple', 'tomato', 'banana', 'watermelon']
  }
});

和遍历对象相类似,最大的不同点在于对象的 “key” 和 “index” 是一致的,所以这里我们只需要取一个 index 即可,上面代码的渲染结果如下:

<div id="app">
  <ul>
    <li>0. apple</li>
    <li>1. tomato</li>
    <li>2. banana</li>
    <li>3. watermelon</li>
  </ul>
</div>

(三)遍历“整数”

理论上来说,整数并不是一个可遍历的单元,但是 vue 这里相当于给我们提供了一个方便方式来减少重复代码。

<div id="app">
  <ul>
    <li v-for="n in num">{{n}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    num: 3
  }
});

渲染结果如下:

<div id="app">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

二、实际应用

(一)对象、数组 & 组件

实际应用过程中,我们单独使用数组或者对象去描述我们的数据的情况很少,更常见的模式是结合了数组和对象两部分内容:

<div id="app">
   <ul class="persons">
    <li v-for="person in persons">name: {{person.name}}, age: {{person.age}};</li>
  </ul> 
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});

本质上是遍历的一个数组,但是数组的每个元素却是一个对象,也就是上面的 person,我们可以通过 [] 以及 . 两种方式去访问这个对象的属性,比如这里的 name / age,渲染结果如下:

<div id="app">
  <ul class="persons">
    <li>name: Dale, age: 22;</li>
    <li>name: Tim, age: 30;</li>
    <li>name: Rex, age: 23;</li>
  </ul>
</div>

实际上,更加常用且强大的模式,是使用组件与数组/对象进行组合,操作方式与上面相类似。

(二)与 v-if 组合

添加了 v-for 指令的标签,实际上也可以同时添加 v-if 指令,但值得注意的是,v-for 的优先级更高,渲染模板时,相当于对每次遍历的结果进行了一次条件判断。

<div id="app">
   <ul class="persons">
    <li v-for="person in persons" v-if="person.age >= 23">name: {{person.name}}, age: {{person.age}};</li>
  </ul> 
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});

这里先遍历了 persons 的所有元素,然后检查每次得到的 person 的是否大于或等于 23,是则输出,否则不输出,渲染结果如下:

<div id="app">
  <ul class="persons">
    <li>name: Tim, age: 30;</li>
    <li>name: Rex, age: 23;</li>
  </ul>
</div>

如果要让 v-if 指令的优先级更高,可以考虑在 v-for 指令所绑定的标签的父级上添加 v-if 指令。

三、注意事项

(一)key

与 v-for 一样,在不绑定 key 属性的情况下,vue 默认会重用元素以提高性能,如果不需要它的默认行为,显式绑定一个唯一的 key 即可。

(二)数据 -> 视图更新

vue 的视图更新是依赖于 getter/setter 的,如果直接修改、增加、删除数组元素,并不会触发视图的更新。这里 vue 重写了如下方法:

  • push

  • pop

  • shift

  • unshift

  • splice

  • sort

  • reverse

当通过它们修改数据的时候,将会触发视图的更新。

new Vue({
  data: {
    arr: [1, 2, 3]
  }
});

比如上面这种情况,如果我们想要在执行 arr 的 push 等方法,因为 push 是数组类型数据从 Array.prototype.push 继承过来的,所以我们一般情况下有两种实现方式。

(1)修改 Array.prototype

Array.prototype.push = function () {
  console.log(1);
}
([]).push();        // 1

这里我们修改了 Array.prototype 上的 push 方法,但是实际上,整个 prototype 属性都可以被重写,如 Array.prototype = xxx,这样做的好处很明显,在这一处进行修改,之后所有的数组类型都可以直接使用这个重写后的方法,实现和使用都非常简单;但是这样带来的副作用也特别明显,容易影响到其它的代码,其它使用这段代码的地方,除了功能实现上可能受到影响外,效率上也会有较大影响,原生 js 的代码都是经过特殊优化的,我们重写实现,效率肯定会受到影响,最重要的是,如果大家的代码在同一个环境下运行,然后都尝试重写同一个方法的话,最终结果不言而喻。

(2)增加自有方法

var arr = [];

arr.push = function () {
  console.log(1);
}

arr.push();         // 1
Array.prototype.push.toString();  // "function push() { [native code] }"

这里修改了 arr 的 push 方法, 但是并不涉及 Array.prototype.push,因为读写一个对象的属性/方法的时候,js 总是先尝试访问 “ownproperty”,也就是 “hasOwnProperty” 所检测的内容,这里我们姑且将其称为“自有属性(方法)”。读取数据的时候,如果没有读取到内容,那么 js 会尝试向上搜索 __proto__ 上的数据;写数据的时候,如果有这个自有属性,则会将其覆盖,如果没有,则将其作为自有属性添加到改对象上,而不会尝试将其添加到 __proto__ 上,这样的规则,也是为了防止“子类”以外修改“父类”的属性、方法等。这种实现方式虽然可以避免上面修改 Array.prototype 的一系列缺点,但是它的问题就更加明显,因为每次创建这样一个“数组”,就要重新实现/绑定这样一系列方法,它所带来的开发效率、性能问题不容小觑。

(3)vue 的实现方式

var arr = [];
new Vue({
  data: {
    arr: arr
  }
});

arr.push.toString();    // "function mutator() {var arguments$1 = arguments;... 这是 vue 自己的实现
Array.prototype.push.toString();   // "function push() { [native code] }"... 这是浏览器原生的实现
arr.hasOwnProperty('push');      // false 说明不是自有属性

以上说明 vue 既不是修改了 Array.prototype.push,又不是修改了自有属性。但我们通过 instanceof 操作符检查的时候,arr 又是 Array 的一个实例,那么它到底是怎么弄的实现的呢?或者说 vue 的 push 藏在哪儿呢?

var base = [];
var arr = [];

base.push = function () {
  console.log(1);
};
arr.__proto__ = base;
arr.push();     // 1
arr.__proto__.push(); // 1
arr.__proto__.push.toString(); // "function push() { [native code] }"

实际上,vue 是利用了类似上面的方式,先创建了一个 Array 的实例,也就是一个数组类型的基础对象 base,然后为它添加了一个自有方法 push,最后用 base 覆盖了需要扩展的 arr 对象的 __proto__ 属性。

vue.js中怎么利用v-for循环实现渲染

这里需要重写 push 等方法的数组,我们只需要将其 __proto__ 指向 base 数组,在读新创建的数组的 push 的时候,发现它并没有这样一个自有方法,那么它就尝试读 __proto__ 上的方法,发现 __proto__ 属性(也即 base 数组)上有这样一个自有方法,那么它就不必再向上搜索而直接使用 base.push。

通过这种方式,我们不必为每一个数组重写一遍 push 方法,也不必去修改 Array.prototype ,看起来倒像是一个两全其美的方法。

上述内容就是vue.js中怎么利用v-for循环实现渲染,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue.js中怎么利用v-for循环实现渲染

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么在Linux中利用shell 实现for循环

本篇文章为大家展示了怎么在Linux中利用shell 实现for循环,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。C语言风格for ((i=1; i<=100; i++))do echo $ido
2023-06-09

怎么在python中利用jinja2实现渲染

这期内容当中小编将会给大家带来有关怎么在python中利用jinja2实现渲染,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Python的优点有哪些1、简单易用,与C/C++、Java、C# 等传统语言相
2023-06-14

Python中怎么实现for循环

这篇文章将为大家详细讲解有关Python中怎么实现for循环,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。For循环如何在Python中工作Python的for循环通过遍历数组的序列来工作。
2023-06-15

怎么在python中利用for循环实现内输出和外输出

这期内容当中小编将会给大家带来有关怎么在python中利用for循环实现内输出和外输出,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Python主要用来做什么Python主要应用于:1、Web开发;2、数
2023-06-14

Android中怎么利用ViewPager实现无限循环

本篇文章为大家展示了Android中怎么利用ViewPager实现无限循环,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Android ViewPager实现无限循环的实例ViewPager自身并不
2023-05-31

php中怎么用for循环实现九九乘法表

你可以使用两个嵌套的for循环来实现九九乘法表。第一个for循环控制行数,第二个for循环控制列数。```phpfor ($i = 1; $i for ($j = 1; $j $result = $i * $j;echo "{$j} * {
2023-08-17

怎么在Python中利用for循环初始化数组

这篇文章给大家介绍怎么在Python中利用for循环初始化数组,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。python是什么意思Python是一种跨平台的、具有解释性、编译性、互动性和面向对象的脚本语言,其最初的设计
2023-06-14

C# 中怎么利用for循环语句为数组赋值

本篇文章为大家展示了C# 中怎么利用for循环语句为数组赋值,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。C# for循环语句为数组赋值是C#编程中比较基础的一部分,通过C# for循环语句遍历一个
2023-06-17

Java中的循环队列怎么利用数组实现

这篇文章将为大家详细讲解有关Java中的循环队列怎么利用数组实现,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。用Java的数组实现一下循环队列。队列的类//循环队列class CirQueu
2023-05-31

怎么在Python中利用for循环对字典进行迭代

今天就跟大家聊聊有关怎么在Python中利用for循环对字典进行迭代,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。python的五大特点是什么python的五大特点:1.简单易学,开
2023-06-14

PHP中怎么利用循环实现一个分类列表

PHP中怎么利用循环实现一个分类列表,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。< div class="modContent"> < %foreach from=$so
2023-06-17

编程热搜

目录