Cara Menggunakan Filter pada Vue Js

Vue.js memberikan keleluasaan untuk mendefinisikan filter yang dapat digunakan untuk melakukan format pada teks. Filter digunakan pada dua tempat, yaitu pada mustache interpolation dan expression v-bind. Filter disisipkan pada akhir dari javascript expression dengan diawali dengan tanda | (pipa).

Format penulisan Filter adalah:

<!-- pada mustache -->
{{ pesan | nama_filter }}

<!-- pada v-bind -->
<div v-bind:id="rawId | formatId"></div>

Sedangkan untuk pendefinisian filter digunakan format sebagai berikut:

filters: {
	nama_filters: function() {
	isi_filter
	}
}

Berikut ini kita akan membuat contoh untuk Menggunakan Filter pada Vue Js. Contoh program yang kita akan buat adalah untuk melakukan format pada teks, menjadikannya huruf kapital semua atau huruf kecil semua. Langsung saja kita mempraktekannya ya:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<p>Normal:</p>
		<p>{{ pesan }}</p>
		<p>Huruf kapital</p>
		<p>{{ pesan | kapital }}</p>
		<p>Huruf kecil</p>
		<p>{{ pesan | kecil }}</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				pesan: 'Belajar Vue Js'
			},
			filters: {
				kapital(value) {
					if (!value) return ''
						value = value.toString()
					return value.toUpperCase()
				},
				kecil(value) {
					if (!value) return ''
						value = value.toString()
					return value.toLowerCase()		
				},
			}
		})
	</script>
</body>
</html>

Demikian contoh Cara Menggunakan Filter pada Vue Js. Semoga bermanfaat.

Kategori