for循环渲染,vue常见指令的运用

By admin in 4858美高梅 on 2019年4月12日

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循环渲染,vue常见指令的运用。有关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表示数组每壹项的因素,实例如下

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

现实有以下必要留意的地点

  • forEach不可能遍历对象
  • forEach不可能在IE中应用,firefox和chrome完结了该办法
  • forEach无法使用break,continue跳出循环,使用return时,效果和在for循环中央银行使continue1致

do/while

函数具体的兑现格局如下,可是有少数值得注意的是,当使用continue时,若是您将i++放在了背后,那么i++的值将直接不会改变,最后沦为死循环。由此利用do/while一定要行事极为谨慎一点。

不建议使用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并非数组,而是3个目的,只是因为其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辙的,也就不用操心这些难点了.
小补充

设若你意识有点人写函数这样搞,不要慌张,也绝不以为她英豪上鸟不起

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

()(), !function() {}() +function() {}() 两种函数自实施的不二等秘书籍^_^

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

1.v-for遍历数组

一.v-for遍历数组

一、简介

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

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

vue.js 的巡回渲染是凭借于 v-for 指令,它能够根据 vue
的实例之中的音信,循环遍历所需数据,然后渲染出相应的始末。它能够遍历数组类型以及对象类型的数额,js
里面包车型客车数组自身实质上也是指标,那里遍历数组和对象的时候,格局一般但又稍有例外。

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

(2)(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)

4858美高梅 1

4858美高梅 2

其间,val 是遍历获得的属性值,key 是遍历获得的属性名,index
是遍历次序,那里的 key/index
都以可选参数,即便不要求,这么些命令其实能够写成 v-for=”val in me”;

 

2.v-for遍历json对象

(贰)遍历关键词 in

2.v-for遍历json对象

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

in 能够应用 of 替代,官方的布道是“它是最周边 JavaScript
迭代器的语法”,但实在选取上并不曾任何差距;

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

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

(3)被遍历对象 me

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

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

me 是绑定在实例
data属性上的贰个属性,实际上,它是有三个执行环境的,也便是我们接触最多的
vue 实例,模板中,我们照例能够像在 methods 以及总计属性中一样,通过 this
访问到它,那里的 me 其实就约等于 this.me,模板中平昔写 this.me
也是立竿见影的。

(三)(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>

输出结果:

(贰)遍历数组

出口结果:

4858美高梅 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']
  }
});

4858美高梅 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
那里一定于给大家提供了二个福利方式来减弱重复代码。

4858美高梅,运营代码:

<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>

出口结果:

渲染结果如下:

输出结果:

4858美高梅 5

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

4858美高梅 6

理所当然,v-for也足以在template中选取,可是这么些本身不想写了

2、实际利用

当然,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
      }
    ]
  }
});

精神上是遍历的1个数组,可是数组的种种成分却是贰个指标,也正是上边的
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
的优先级越来越高,渲染模板时,相当于对每一遍遍历的结果进行了2回口径判断。

<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
私下认可会重用成分以增加质量,假诺不供给它的私下认可行为,显式绑定贰个唯一的 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,那样做的裨益很强烈,在那壹处进行改动,之后有所的数组类型都能够直接使用那几个重写后的章程,落成和选择都卓殊简单;然则这么带来的副效用也特意鲜明,简单影响到其它的代码,其余使用那段代码的地点,除了效能达成上大概受到震慑外,效能上也会有较大影响,原生
js
的代码都以通过十分优化的,大家重写达成,效能肯定会受到震慑,最关键的是,即便我们的代码在同3个条件下运作,然后都品尝重写同一个艺术的话,最终结果肯定。

(二)扩张自有艺术

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
的1雨后冬笋缺点,不过它的标题就进一步明显,因为每趟成立那样一个“数组”,就要重复完结/绑定那样一文山会海措施,它所推动的费用功效、品质难点不容小觑。

(三)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__ 属性。

4858美高梅 7

此间必要重写 push 等格局的数组,大家只必要将其 __proto__ 指向 base
数组,在读新创制的数组的 push
的时候,发现它并未那样二个自有办法,那么它就尝试读 __proto__
上的章程,发现 __proto__ 属性(也即 base
数组)上有那样贰个自有办法,那么它就无须再提升搜索而一贯行使
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中的表格导出来

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有