Vue.Js v-for kullanımı

Sezai AlkanFrontend Developer

Vue.js #vue-js #v-for

Vue.js de v-for kullanımını bir dizi değişkeni içerisinde gelen veriyi v-for içerisinde belirlediğimiz bir değişkene alarak yazdırabilmekteyiz. Bu kullanım belirledigimizyenidegisken in dizidegikeni şeklindedir.

Kullanımı : v-for=""

Belirlediğimiz yeni değişken içerisinde gelen bir veriyi alarak yazdırabilmekteyiz.

<div id="app">
	<ul>
		<li v-for="event in simple">{{ event }}</li>
	</ul>
</div>

new Vue({
	el : "#app",
	data :{
		simple : ["Seat", "Bmw", "Audi", "Mercedes"]
	}
})

Yukarıdaki örnekte simple dizi değişkeni içerisinde gelen her bir veriyi event değişkeni içerisine alarak elde edebilmekteyiz bu event değişkeni adı sizin kullanımınıza göre değişiklik gösterebilmektedir.

Yukarıdaki örneğin ekran çıktısı aşağıdaki gibidir.