<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                # 10 渲染列表第 2 部分(遍歷對象) > 原文: [https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/](https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/) 希望您已經知道[使用`v-for`指令遍歷數組元素](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/)。 在我們的應用中,我們處理的對象與數組一樣多。 因此,不用費勁,讓我們了解如何迭代對象的各種屬性。 我聽到你說:“*那么對象數組呢?*”我懂了。 我們也會處理這種情況! ## 遍歷對象 是時候向我們的 Vue 實例的`data`對象添加一個簡單的對象了。 ```js var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"], letters: { a: "apple", b: "banana", c: "cat" } } }); ``` 為了遍歷對象的鍵值對,我們可以使用相同的`v-for`指令。 ### 1\. 訪問對象的值 訪問對象的值非常簡單。 ```js <div v-for="value in letters"> {{ value }} </div> ``` 這種語法與遍歷數組值非常相似嗎? 如果我們只想從每個鍵值對中獲取值,那么就足夠了。 * ‘`value`’– 您可以選擇任何名稱。 使用相同的名稱訪問每個值。 * ‘`letters`’– 必須與`data`對象中的對象名稱相同。 ![Accessing object values](https://img.kancloud.cn/67/7a/677a2d9e7360d27a813d6c1c73484622_661x413.png) ### 2\. 獲得鍵和值 如果我們想在`v-for`語法中使用多個參數,則必須使用括號。 **順序**在這里很重要。 * **第一個自變量**將始終是**值** * **第二個自變量**將是**鍵**。 參數名稱可以是我們選擇的任何名稱。 為了簡單和易于理解,讓我們使用`value`和`key`作為參數名稱。 ```html <div v-for="(value, key) in letters"> {{ key }} for {{ value }} </div> ``` ![Object key-value pairs](https://img.kancloud.cn/06/a5/06a5b5d40340151b1ddff72d7983ff9d_662x325.png) ### 3\. 訪問鍵,值和當前索引 第三個自變量可用于獲取正在訪問鍵值對的當前指標。 同樣,這些論據的順序很重要。 第一個參數將始終是值,第二個參數將是鍵,第三個參數是當前索引。 參數名稱可以一如既往地由我們選擇。 不要忘記將所有這些參數括在括號中。 為了更好地理解,讓我們將“`k`”用作鍵,將“`v`”用作值,將“`i`”用作當前索引。 ```html <div v-for="(v, k, i) in letters"> {{ k }} for {{ v }} - ({{ i }}) </div> ``` **注意**: *請注意,這些鍵值對的顯示順序可能會因瀏覽器而異。 因為順序基于`Object.keys()`的結果,該結果返回對象的所有鍵。* 由于參數名稱可以是我們喜歡的任何名稱,因此以下代碼也提供了相同的結果。 ```html <div v-for="(value, key, index) in letters"> {{ key }} for {{ value }} - ({{ index }}) </div> ``` ![](https://img.kancloud.cn/f6/6d/f66d198addf130bfa260a47883fa8e35_728x325.png) ## 遍歷對象數組 假設我們的數據對象中有兩個簡單對象的數組。 ```jsscript movies: [ { character: "Iron man", name: "Avengers" }, { character: "groot", name: "Guardians of the Galaxy" } ] ``` 為了訪問數組中每個對象的值, ```html <li v-for="movie in movies"> <strong>Movie name:</strong> {{ movie.name }} and <br/> <strong>Character:</strong> {{ movie.character }} </li> ``` * `movie in movies` – 從`movie`變量中的`movies`數組中獲取每個對象 * `movie.name`和`movie.character` – 從當前正在循環的單個對象中分別獲取鍵`name`和`character`的值,并將其保存在“`movie`”變量中。 請記住,如果您不想使用點運算符或動態呈現鍵值對,則可以嵌套另一個`v-for`指令。 當然,您可以在其中嵌套任意數量的`v-for`指令。 因此,使用點運算符的替代代碼是 ```html <li v-for="movie in movies"> <div v-for="(value, key) in movie"> {{ key }}: {{ value }} </div> </li> ``` ![array of objects](https://img.kancloud.cn/73/f3/73f375b61e06ce01180afe37e425e8b1_421x325.png) ## 跟蹤獨特的“鍵”屬性 在處理簡單列表時,我們可以像到目前為止討論的那樣使用`v-for`指令。 但是在處理子組件(我們將在本系列教程的后面部分介紹),更新列表元素等過程中,您可能會遇到一些意外行為。為避免在編碼時遇到此類顛簸,始終建議提供**唯一值**并將其綁定到特殊的`key`屬性,如下所示, ```html <li v-for="movie in movies" v-bind:key="movie.name"> ``` 希望電影的名稱是唯一的。 這將有助于 Vue 跟蹤每個節點的身份。 ## 遍歷一個范圍 如果遇到僅打印從 **1** 到某些**固定整數**的數字的情況,那么再次說,這只是 Vue 的`v-for`指令。 例如, ```html <span v-for="num in 3"> ``` * *`num`* – 您選擇的任何變量名稱,它將在給定范圍內循環時代表當前數字 * *`in`* – 分隔符(根據語法) * *3* – 范圍,表示循環時要考慮的最后一個數字。 假設我們要打印 5 到 1 到 3 之間的數字。 按照上面的示例很容易, ```html <div v-for="number in 5"> <strong>{{ number }}. </strong> <span v-for="num in 3"> {{ num }} </span> &nbsp; </div> ``` 外部`v-for`跟蹤`<div>`標簽內的代碼重復的次數,內部`v-for`生成 1 到 3 的整數范圍。 ![Printing numbers](https://img.kancloud.cn/8a/79/8a798e3eaa594d2a040249691912ebca_564x294.png) 讓我們只看完整的代碼,而不是看看各個片段。 **`index.html`** ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Greetings</h2> <!-- Iterating through array elements --> <ul> <li v-for="greeting in greetings" v-text=greeting></li> </ul> <!-- Accessing array elements along with thier index --> <h2>Greetings with Index</h2> <div v-for="(greeting, index) in greetings"> {{ index }}. {{ greeting}} </div> <hr/> <!-- Iterating through objects --> <h2>Object values</h2> <div v-for="value in letters">{{ value }}</div> <hr/> <h2>Object key-value pairs</h2> <div v-for="(value, key) in letters"> {{ key }} for {{ value }} </div> <hr/> <h2>Object key-value and index</h2> <div v-for="(value, key, index) in letters"> {{ key }} for {{ value }} - ({{ index }}) </div> <hr/> <!-- Iterating over an array of objects --> <ul> <li v-for="movie in movies" v-bind:key="movie.name"> <strong>Movie name:</strong> {{ movie.name }} and <br/> <strong>Character:</strong> {{ movie.character }} </li> </ul> <!-- Alternative method --> <h4> Aliter </h4> <ul> <li v-for="movie in movies"> <div v-for="(value, key) in movie"> {{ key }}: {{ value }} </div> </li> </ul> <hr/> <!-- Iterating over numbers --> <div v-for="number in 5"> <strong> {{ number }}. </strong> <span v-for="num in 3"> {{ num }} </span> &nbsp; </div> </div> <!-- including index.js file --> <script src="index.js"></script> </body> </html> ``` **`index.js`** ```js var app = new Vue({ el: "#app", data: { greetings: ["hi", "bonjour", "hola", "ciao"], letters: { a: "apple", b: "banana", c: "cat" }, movies: [ { character: "Iron man", name: "Avengers" }, { character: "groot", name: "Guardians of the Galaxy" } ] } }); ``` [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中也提供了上面討論的所有代碼。 故事的寓意,`v-for` – 一個統治所有人的指令! ? 祝你有個美好的一天。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看