Trik Menggunakan Array dan Directive v-for pada Vue Js

by | Aug 16, 2018 | Framework Javascript, Javascript | 0 comments

Penggunaan directive v-for juga dapat menghasilkan nilai terurut dari satu sampai angka sekian dengan langsung memberikan nilai pada directive v-for.

Berikut ini kita akan membuat contohnya ya teman-teman:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<b v-for="x in 15">
			{{ x }}
		</b>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el: '#app',
		})
	</script>
</body>
</html>

 

Tidak dibuat data apapun, data sudah langsung di isikan oleh directive v-for, ketika kita render browser maka hasilnya adalah angka urut dari satu sampai lima belas.

Kita juga dapat bereksperimen dengan menambahkan directive lain, misalnya kita tambahkan directive v-if untuk menghasilkan nilai yang lain:

<div id="app">
	<b v-for="x in 15" v-if="x != 2">
		{{ x }}
	</b>
</div>

 

Untuk hasilnya ketika kita buka pada browser. Maka angka 2nya hilang bukan? Demikian Trik Menggunakan Array dan Directive v-for pada Vue Js Semoga bermanfaat