真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

  

    {{index}}. {{key}}: {{val}}
  

  

    
0. name: Dale
    
1. age: 22
    
2. sex: male
    
3. height: 170
  

  

    {{index}}. {{item}}
  

和遍歷對(duì)象相類似，最大的不同點(diǎn)在于對(duì)象的 “key” 和 “index” 是一致的，所以這里我們只需要取一個(gè) index 即可，上面代碼的渲染結(jié)果如下：

  

    
0. apple
    
1. tomato
    
2. banana
    
3. watermelon
  

（三）遍歷“整數(shù)”

理論上來說，整數(shù)并不是一個(gè)可遍歷的單元，但是 vue 這里相當(dāng)于給我們提供了一個(gè)方便方式來減少重復(fù)代碼。

  

    {{n}}
  

...
var vm = new Vue({
  el: '#app',
  data: {
    num: 3
  }
});

渲染結(jié)果如下：

  

    
1
    
2
    
3
  

二、實(shí)際應(yīng)用

（一）對(duì)象、數(shù)組 & 組件

實(shí)際應(yīng)用過程中，我們單獨(dú)使用數(shù)組或者對(duì)象去描述我們的數(shù)據(jù)的情況很少，更常見的模式是結(jié)合了數(shù)組和對(duì)象兩部分內(nèi)容：

   
    name: {{person.name}}, age: {{person.age}};
   

...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});

本質(zhì)上是遍歷的一個(gè)數(shù)組，但是數(shù)組的每個(gè)元素卻是一個(gè)對(duì)象，也就是上面的 person，我們可以通過 [] 以及 . 兩種方式去訪問這個(gè)對(duì)象的屬性，比如這里的 name / age，渲染結(jié)果如下：

  
    
name: Dale, age: 22;
    
name: Tim, age: 30;
    
name: Rex, age: 23;
  

實(shí)際上，更加常用且強(qiáng)大的模式，是使用組件與數(shù)組/對(duì)象進(jìn)行組合，操作方式與上面相類似。

（二）與 v-if 組合

添加了 v-for 指令的標(biāo)簽，實(shí)際上也可以同時(shí)添加 v-if 指令，但值得注意的是，v-for 的優(yōu)先級(jí)更高，渲染模板時(shí)，相當(dāng)于對(duì)每次遍歷的結(jié)果進(jìn)行了一次條件判斷。

   
    = 23">name: {{person.name}}, age: {{person.age}};
   

...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});

這里先遍歷了 persons 的所有元素，然后檢查每次得到的 person 的是否大于或等于 23，是則輸出，否則不輸出，渲染結(jié)果如下：

  
    
name: Tim, age: 30;
    
name: Rex, age: 23;
  

如果要讓 v-if 指令的優(yōu)先級(jí)更高，可以考慮在 v-for 指令所綁定的標(biāo)簽的父級(jí)上添加 v-if 指令。

三、注意事項(xiàng)

（一）key

與 v-for 一樣，在不綁定 key 屬性的情況下，vue 默認(rèn)會(huì)重用元素以提高性能，如果不需要它的默認(rèn)行為，顯式綁定一個(gè)唯一的 key 即可。

（二）數(shù)據(jù) -> 視圖更新

vue 的視圖更新是依賴于 getter/setter 的，如果直接修改、增加、刪除數(shù)組元素，并不會(huì)觸發(fā)視圖的更新。這里 vue 重寫了如下方法：

• push

• pop

• shift

• unshift

• splice

• sort

• reverse

當(dāng)通過它們修改數(shù)據(jù)的時(shí)候，將會(huì)觸發(fā)視圖的更新。

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

比如上面這種情況，如果我們想要在執(zhí)行 arr 的 push 等方法，因?yàn)?push 是數(shù)組類型數(shù)據(jù)從 Array.prototype.push 繼承過來的，所以我們一般情況下有兩種實(shí)現(xiàn)方式。

（1）修改 Array.prototype

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

這里我們修改了 Array.prototype 上的 push 方法，但是實(shí)際上，整個(gè) prototype 屬性都可以被重寫，如 Array.prototype = xxx，這樣做的好處很明顯，在這一處進(jìn)行修改，之后所有的數(shù)組類型都可以直接使用這個(gè)重寫后的方法，實(shí)現(xiàn)和使用都非常簡(jiǎn)單；但是這樣帶來的副作用也特別明顯，容易影響到其它的代碼，其它使用這段代碼的地方，除了功能實(shí)現(xiàn)上可能受到影響外，效率上也會(huì)有較大影響，原生 js 的代碼都是經(jīng)過特殊優(yōu)化的，我們重寫實(shí)現(xiàn)，效率肯定會(huì)受到影響，最重要的是，如果大家的代碼在同一個(gè)環(huán)境下運(yùn)行，然后都嘗試重寫同一個(gè)方法的話，最終結(jié)果不言而喻。

（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，因?yàn)樽x寫一個(gè)對(duì)象的屬性/方法的時(shí)候，js 總是先嘗試訪問 “ownproperty”，也就是 “hasOwnProperty” 所檢測(cè)的內(nèi)容，這里我們姑且將其稱為“自有屬性（方法）”。讀取數(shù)據(jù)的時(shí)候，如果沒有讀取到內(nèi)容，那么 js 會(huì)嘗試向上搜索 __proto__ 上的數(shù)據(jù)；寫數(shù)據(jù)的時(shí)候，如果有這個(gè)自有屬性，則會(huì)將其覆蓋，如果沒有，則將其作為自有屬性添加到改對(duì)象上，而不會(huì)嘗試將其添加到 __proto__ 上，這樣的規(guī)則，也是為了防止“子類”以外修改“父類”的屬性、方法等。這種實(shí)現(xiàn)方式雖然可以避免上面修改 Array.prototype 的一系列缺點(diǎn)，但是它的問題就更加明顯，因?yàn)槊看蝿?chuàng)建這樣一個(gè)“數(shù)組”，就要重新實(shí)現(xiàn)/綁定這樣一系列方法，它所帶來的開發(fā)效率、性能問題不容小覷。

（3）vue 的實(shí)現(xiàn)方式

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

arr.push.toString();    // "function mutator() {var arguments$1 = arguments;... 這是 vue 自己的實(shí)現(xiàn)
Array.prototype.push.toString();   // "function push() { [native code] }"... 這是瀏覽器原生的實(shí)現(xiàn)
arr.hasOwnProperty('push');      // false 說明不是自有屬性

以上說明 vue 既不是修改了 Array.prototype.push，又不是修改了自有屬性。但我們通過 instanceof 操作符檢查的時(shí)候，arr 又是 Array 的一個(gè)實(shí)例,那么它到底是怎么弄的實(shí)現(xiàn)的呢？或者說 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] }"

實(shí)際上，vue 是利用了類似上面的方式，先創(chuàng)建了一個(gè) Array 的實(shí)例，也就是一個(gè)數(shù)組類型的基礎(chǔ)對(duì)象 base，然后為它添加了一個(gè)自有方法 push，最后用 base 覆蓋了需要擴(kuò)展的 arr 對(duì)象的 __proto__ 屬性。

這里需要重寫 push 等方法的數(shù)組，我們只需要將其 __proto__ 指向 base 數(shù)組，在讀新創(chuàng)建的數(shù)組的 push 的時(shí)候，發(fā)現(xiàn)它并沒有這樣一個(gè)自有方法，那么它就嘗試讀 __proto__ 上的方法，發(fā)現(xiàn) __proto__ 屬性（也即 base 數(shù)組）上有這樣一個(gè)自有方法，那么它就不必再向上搜索而直接使用 base.push。

通過這種方式，我們不必為每一個(gè)數(shù)組重寫一遍 push 方法，也不必去修改 Array.prototype ，看起來倒像是一個(gè)兩全其美的方法。

上述內(nèi)容就是vue.js中怎么利用v-for循環(huán)實(shí)現(xiàn)渲染，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。