- Vue.js 2 Web Development Projects
- Guillaume Chau
- 233字
- 2021-07-02 22:34:27
Displaying a list with v-for
We will now display the list of notes below the toolbar.
- Just below the toolbar, add a new p element with the ;notes class:
<aside class="side-bar"> <p class="toolbar"> <button @click="addNote"><i class="material-icons">add</i>
Add note</button> </p> <p class="notes"> <!-- Note list here --> </p> </aside>
Now, we want to display a list of multiple p elements, one for each note. To achieve this, we need the v-for directive. It takes a special expression as the value, in the form of item of items, that will iterate over the items array or object and expose an item value for this part of the template. Here is an example:
<p v-for="item of items">{{ item.title }}</p>
You can also use the in keyword instead of of:
<p v-for="item in items">{{ item.title }}</p>
Imagine that we have the following array:
data () { return { items: [ { title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }, ] } }
The final rendered DOM will look like this:
<p>Item 1</p> <p>Item 2</p> <p>Item 3</p>
As you can see, the element on which you put the v-for directive is repeated in the DOM.
- Let's go back to our notebook and display the notes in the side pane. We store them in the notes data property, so we need to iterate over it:
<p class="notes"> <p class="note" v-for="note of notes">{{note.title}}</p> </p>
We should now have the notes list displayed below the button:

Add a few more notes using the button, and you should see that the list is updating automatically!
- TypeScript入門與實戰
- Mastering Articulate Storyline
- Python機器學習實戰
- Kotlin Standard Library Cookbook
- 實戰Java高并發程序設計(第3版)
- 基于Swift語言的iOS App 商業實戰教程
- D3.js 4.x Data Visualization(Third Edition)
- Learning OpenStack Networking(Neutron)(Second Edition)
- Python語言實用教程
- 鴻蒙OS應用編程實戰
- MATLAB GUI純代碼編寫從入門到實戰
- Arduino可穿戴設備開發
- Struts 2.x權威指南
- XML程序設計(第二版)
- Beginning C# 7 Hands-On:The Core Language