for循环渲染,浅析vue中常见循环遍历指令的行使

vue中循环遍历使用的通令是v-for

vue中循环遍历使用的吩咐是v-for

那两日学习了Vue.js
感觉v-for循环渲染这几个地点知识点挺多的,而且很重点,所以,前些天添加一点小笔记。

JavaScript中选择各类循环举办遍历的方法总计,javascript

为了便利例子讲解,现有数组和json对象如下

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
  aaa: 'Javascript',
  bbb: 'Gulp',
  ccc: 'CSS3',
  ddd: 'Grunt',
  eee: 'jQuery',
  fff: 'angular'
};

for in

for(var item in arr|obj){} 能够用来遍历数组和指标

遍历数组时,item表示索引值, arr表示最近索引值对应的因素 arr[item]
遍历对象时,item表示key值,arr代表key值对应的value值 obj[item]

(function() {
  for(var i in demoArr) {
    if (i == 2) {
      return; // 函数执行被终止
      // break; // 循环被终止
      // continue; // 循环被跳过
    };
    console.log('demoArr['+ i +']:' + demoArr[i]);
  }
  console.log('-------------');
})();

关于for in,有以下几点必要小心:

在for循环与for
in循环中,i值都会在循环甘休未来保留下去。由此接纳函数自实施的办法防止。
使用return,break,continue跳出循环都与for循环壹致,可是关于return要求小心,在函数体中,return代表函数执行终止,固然是循环外面包车型大巴代码,也不再接续往下举办。而break仅仅只是终止循环,前边的代码会继续执行。

function res() {
  var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];

  for(var item in demoArr) {
    if (item == 2) {
      return;
    };
    console.log(item, demoArr[item]);
  }
  console.log('desc', 'function res'); //不会执行
}
forEach

demoArr.forEach(function(arg) {})

参数arg表示数组每1项的要素,实例如下

demoArr.forEach(function(e) {
  if (e == 'CSS3') {
    return; // 循环被跳过
    // break;  // 报错
    // continue;// 报错
  };
  console.log(e);
})

切切实实有以下要求专注的地点

  • forEach不恐怕遍历对象
  • forEach一点都不大概在IE中选用,firefox和chrome达成了该形式
  • forEach不能够使用break,continue跳出循环,使用return时,效果和在for循环中选拔continue壹致

do/while

函数具体的完毕格局如下,可是有几许值得注意的是,当使用continue时,若是你将i++放在了背后,那么i++的值将一向不会改变,最终陷入死循环。由此使用do/while一定要小心翼翼一点。

for循环渲染,浅析vue中常见循环遍历指令的行使。不建议利用do/while的方式来遍历数组

// 直接使用while
(function() {
  var i = 0,
    len = demoArr.length;
  while(i < len) {
    if (i == 2) {
      // return; // 函数执行被终止
      // break; // 循环被终止
      // continue; // 循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!!
    };
    console.log('demoArr['+ i +']:' + demoArr[i]);
    i ++;
  }
  console.log('------------------------');
})();

// do while
(function() {
  var i = 0,
    len = demo3Arr.length;
  do {
    if (i == 2) {
      break; // 循环被终止
    };
    console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
    i++;
  } while(i<len);
})();

$.each

$.each(demoArr|demoObj, function(e, ele))

能够用来遍历数组和对象,当中e表示索引值恐怕key值,ele代表value值

$.each(demoArr, function(e, ele) {
  console.log(e, ele);
})

输出为

0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"

此间有那几个内需注意的地点

  • 动用return 也许return true为跳过一次巡回,继续执行前面包车型地铁巡回
  • 应用return false为停止循环的推行,不过并不结束函数执行
  • 不恐怕利用break与continue来跳过巡回

巡回中this值输出接近如下

console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}

console.log(this == ele);
// true

有关地点的this值,遍历一下

$.each(this, function(e, ele) {
  console.log(e, ele);
})

// 0 c
// 1 s
// 2 s
// 4 3

为什么length 和
[[PrimitiveValue]]未曾遍历出来?突然灵光一动,在《javascript高级编制程序》中找到了答案,差不离意思就是javascript的内部属性中,将对象数据属性中的Enumerable设置为了false

// 查看length的内部属性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}
$.each 中的 $(this) 与this有所不同,不过遍历结果却是一样,你可以在测试代码中打印出来看看

$(selecter).each

专程用来遍历DOMList

$('.list li').each(function(i, ele) {
  console.log(i, ele);
  // console.log(this == ele); // true
  $(this).html(i);
  if ($(this).attr('data-item') == 'do') {
    $(this).html('data-item: do');
  };
})

i: 系列值 ele: 只当前被遍历的DOM成分
this 当前被遍历的DOM成分,不能够调用jQuery方法
$(this) == $(ele)
当前被遍历元素的jquery对象,能够调用jquery的章程开始展览dom操作
使用for in 遍历DOMList

因为domList并非数组,而是二个目的,只是因为其key值为0,一,二…
而感觉到与数组类似,但是一直遍历的结果如下

var domList = document.getElementsByClassName('its');
for(var item in domList) {
  console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
//  ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}

故而我们在选取for in 遍历domList时,须要将domList转换为数组

var res = [].slice.call(domList);
for(var item in res) {}

看似那样的对象还有函数的个性arguments对象,当然字符串也是足以遍历的,不过因为字符串其余属性的enumerable被设置成了false,由此遍历出来的结果跟数组是1样的,也就无须操心那一个标题了.
小补充

1经您发觉有个外人写函数那样搞,不要慌乱,也无须以为她惊天动地上鸟不起

+function(ROOT, Struct, undefined) {
  ... 
}(window, function() {
  function Person() {}
})

()(), !function() {}() +function() {}() 三种函数自推行的主意^_^

为了便于例子讲解,现有数组和json对象如下 var demoArr = [‘Javascript’,
‘Gulp’, ‘CSS3’, ‘Gru…

①.v-for遍历数组

1.v-for遍历数组

一、简介

(1)value in arr 遍历数组中的成分

(壹)value in arr 遍历数组中的成分

vue.js 的巡回渲染是凭借于 v-for 指令,它可以依据 vue
的实例之中的音信,循环遍历所需数据,然后渲染出相应的故事情节。它能够遍历数组类型以及对象类型的数目,js
里面包车型大巴数组本人实质上也是指标,那里遍历数组和目的的时候,格局1般但又稍有例外。

(二)(value,index) in arr 遍历数组中的成分和数组下标

(二)(value,index) in arr 遍历数组中的成分和数组下标

(壹)遍历对象

运作代码:

运维代码:

<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
    }
  }
});
<body>
    <div class="box">
        <ul>
            <li v-for="value in arr">{{value}}</li><br> 
            <li v-for="(value,index) in arr">{{value}}--{{index}}</li>
        </ul>
    </div>
<script src="js/vue.js"></script>
<script>
  new Vue({
      el:".box",
      data:{
          arr:["哈哈","嘻嘻","哼哼"]
      }
  });
</script>
</body>
<body>
  <div class="box">
    <ul>
      <li v-for="value in arr">{{value}}</li><br> 
      <li v-for="(value,index) in arr">{{value}}--{{index}}</li>
    </ul>
  </div>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     arr:["哈哈","嘻嘻","哼哼"]
   }
 });
</script>
</body>

那边,v-for 接收的参数相对较复杂,然则足以分为七个部分:

出口结果:

出口结果:

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

澳门葡京 1

澳门葡京 2

里面,val 是遍历得到的属性值,key 是遍历获得的属性名,index
是遍历次序,那里的 key/index
都以可选参数,假若不须要,那一个命令其实能够写成 v-for=”val in me”;

 

2.v-for遍历json对象

(2)遍历关键词 in

2.v-for遍历json对象

(一)value in json 遍历json对象中的值

in 能够选取 of 替代,官方的布道是“它是最相仿 JavaScript
迭代器的语法”,但实质上选择上并未其余分裂;

(1)value in json 遍历json对象中的值

(二)(value,key) in json 遍历json对象中的值和键

(3)被遍历对象 me

(二)(value,key) in json 遍历json对象中的值和键

(3)(value,key,index) in json 遍历json对象中的值、键和目录

me 是绑定在实例
data属性上的几个个性,实际上,它是有叁个进行环境的,相当于我们接触最多的
vue 实例,模板中,大家依然可以像在 methods 以及计算属性中同样,通过 this
访问到它,那里的 me 其实就相当于 this.me,模板中央直机关接写 this.me
也是行得通的。

(3)(value,key,index) in json 遍历json对象中的值、键和目录

 运营代码:

渲染结果如下:

 运转代码:

<body>
  <div class="box">
    <ul>
      <li v-for="value in json">{{value}}</li><br>
      <li v-for="(value,key) in json">{{value}}--{{key}}</li><br>
      <li v-for="(value,key,index) in json">{{value}}--{{key}}--{{index}}</li>
    </ul>
  </div>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{
     json:{
       baidu:"百度",
       souhu:"搜狐",
       sougou:"搜狗"
     }
   }
 });
</script>
</body>
<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>
<body>
    <div class="box">
        <ul>
            <li v-for="value in json">{{value}}</li><br>
            <li v-for="(value,key) in json">{{value}}--{{key}}</li><br>
            <li v-for="(value,key,index) in json">{{value}}--{{key}}--{{index}}</li>
        </ul>
    </div>
<script src="js/vue.js"></script>
<script>
  new Vue({
      el:".box",
      data:{
          json:{
              baidu:"百度",
              souhu:"搜狐",
              sougou:"搜狗"
          }
      }
  });
</script>
</body>

输出结果:

(2)遍历数组

输出结果:

澳门葡京 3

<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']
  }
});

澳门葡京 4

 三.v-for遍历整数

和遍历对象相类似,最大的不相同点在于对象的 “key” 和 “index”
是千篇一律的,所以那边大家只需求取多个 index 即可,上面代码的渲染结果如下:

 三.v-for遍历整数

(1)n in 整数 遍历1~整数,整数从1开始

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

(1)n in 整数 遍历1~整数,整数从1开始

(2)(n,index) in 整数 遍历1~整数,整数从1开始,索引从0开始

(三)遍历“整数”

(2)(n,index) in 整数 遍历1~整数,整数从1开始,索引从0开始

运转代码:

力排众议上的话,整数并不是一个可遍历的单元,可是 vue
那里一定于给大家提供了3个有益于格局来减弱重复代码。

运作代码:

<body>
  <div class="box">
    <ul>
      <li v-for="n in 3">{{n}}</li><br>
      <li v-for="(n,index) in 3">{{n}}--{{index}}</li>
    </ul>
  </div>
<script src="js/vue.js"></script>
<script>
 new Vue({
   el:".box",
   data:{

   }
 });
</script>
</body>
<div id="app">
  <ul>
    <li v-for="n in num">{{n}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    num: 3
  }
});
<body>
    <div class="box">
        <ul>
            <li v-for="n in 3">{{n}}</li><br>
            <li v-for="(n,index) in 3">{{n}}--{{index}}</li>
        </ul>
    </div>
<script src="js/vue.js"></script>
<script>
  new Vue({
      el:".box",
      data:{

      }
  });
</script>
</body>

输出结果:

渲染结果如下:

出口结果:

澳门葡京 5

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

澳门葡京 6

自然,v-for也能够在template中选择,然而那个自家不想写了

贰、实际运用

当然,v-for也得以在template中应用,可是那几个小编不想写了

总结

(一)对象、数组 & 组件

以上所述是作者给我们介绍的vue中常见循环遍历指令的选取v-for,希望对我们享有支持,假设大家有其它疑问请给本身留言,小编会及时回复大家的。在此也至极多谢大家对台本之家网址的支撑!

其实运用进程中,我们单独接纳数组或许目的去描述大家的数据的情状很少,更广泛的格局是整合了数组和指标两局地内容:

你只怕感兴趣的篇章:

  • 浅谈Vue二.0中v-for迭代语法的浮动(key、index)
  • 采纳vue中的v-for遍历二维数组的方法
  • 解决vue组件中利用v-for出现告警难题及v
    for指令介绍
  • 行使vue的v-for生成table并给table加上序号的实例代码
  • vue贰.0移除或变更的某些东西(移除index
    key)
  • Vue中的v-for循环key属性注意事项小结
<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
的是不是超越或等于 二三,是则输出,不然不出口,渲染结果如下:

<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
默许会重用成分以增进质量,假如不须要它的暗许行为,显式绑定一个唯1的 key
即可。

(2)数据 -> 视图更新

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般情形下有三种完结方式。

(1)修改 Array.prototype

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

此间大家修改了 Array.prototype 上的 push 方法,可是事实上,整个
prototype 属性都得以被重写,如 Array.prototype =
xxx,那样做的便宜很鲜明,在那1处举办改动,之后全数的数组类型都得以直接行使这一个重写后的方法,完毕和平运动用都12分不难;然而那样带来的副效率也特地明确,简单影响到此外的代码,其它使用那段代码的地点,除了成效实现上大概面临震慑外,功能上也会有较大影响,原生
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
的实例,也正是3个数组类型的底子对象 base,然后为它添加了二个自有办法
push,最终用 base 覆盖了亟需增添的 arr 对象的 __proto__ 属性。

澳门葡京 7

此间需求重写 push 等格局的数组,大家只必要将其 __proto__ 指向 base
数组,在读新成立的数组的 push
的时候,发现它并不曾这么1个自有办法,那么它就尝试读 __proto__
上的法子,发现 __proto__ 属性(也即 base
数组)上有那样1个自有办法,那么它就不用再前进搜索而直白采用base.push。

通过那种办法,大家不用为每贰个数组重写叁回 push 方法,也不要去修改
Array.prototype ,看起来倒像是一个地道的法子。

以上正是本文的全体内容,希望对大家的就学抱有补助,也愿意我们多多援助脚本之家。

你或者感兴趣的篇章:

  • 缓解vue组件中选拔v-for现身告警难题及v
    for指令介绍
  • vue中for循环更改数据的实例代码(数据变动但页面数据未变)
  • 关于vue-router的beforeEachInfiniti循环的标题一举成功
  • Vue
    ElementUI之Form表单验证蒙受的题材
  • VUE中v-model和v-for指令详解
  • Vue.js中轻松化解v-for执行出错的三个方案
  • Vue form
    表单提交+ajax异步请求+分页效果
  • vue.js指令v-for使用及索引获取
  • Vuejs第四篇之Vuejs与form成分实例分析
  • vue怎么样将v-for中的表格导出来

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website