Basics of Vue.JS

List Rendering

When have an array of items from a data source, and display them properly in html through vue.

The most simplified down syntax for a vue loop

Simple diagram should

# abstraction example

<ul id=""> 
	<li v-for=“item in items"> 
		{{ item  }} 
	</li> 
</ul>

Coding example using food as an example

v-for=

Creating an array with a list of food.

Foods = [apples, bananas, cherry] 
# Code example

<ul id="example-1"> 
	<li v-for=“Food in Foods"> 
		{{ Food }} 
	</li> 
</ul>

Conditional Rendering

to be done …

Recent Posts