new Vue({ el: '#app',
data: { fruits: ['Apples', 'Oranges', 'Kiwi']
},
render: function(createElement) { return createElement('div', [ createElement('h1', 'Fruit Basket'), createElement('ol', this.fruits.map(function(fruit) { return createElement('li', fruit); }))
]);
}
});
Outputs:
Fruit Basket
- Apples
- Oranges
- Kiwi
In the above example, we’re using a function that returns a series of createElement() invocations, each of which is responsible for generating an element. While the v-for directive does the job in the case of HTML based templates, when using render functions we can simply use the standard .map() function to loop over the fruits data Array.
