Tutorial Vue.Js Bagian 4 : Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js

Setelah sedikit memahami tentang apa itu Vue.JS pada tutorial sebelumnya yang berjudul Tutorial Vue.Js Bagian 1 : Tentang Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding sekarang saya akan memberikan contoh lainnya.

Contoh yang saya akan berikan disni adalah berkaitan dengan validasi input data dengan V-SHOW, V-IF pada Vue.JS.

Berikut adalah contoh dari Validasi Input Data dengan V-SHOW, V-IF pada Vue.js .

Nah sekarang saatnya saya memebritahukan script kode dan penjelasannya

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app">
 <form>
  <h2>V SHOW</h2>
  <!-- atribut v-show -->
  <span class="error" v-show="!pesan">
   Masukkan tulisan.. apasaja
  </span><br>

  <textarea v-model="pesan"></textarea><br>
  <button type="submit">
   Kirim Tulisan
  </button>
 </form>

 <form>
 <h2>V IF</h2>
 <!-- atribut v-if -->
  <span class="error" v-if="!pesan2">
   Masukkan tulisan.. apasaja
  </span><br>

  <textarea v-model="pesan2"></textarea><br>
  <button type="submit">
   Kirim Tulisan
  </button>
 </form>

 <form>
  <h2>V SHOW with Button</h2>
  <span class="error" v-show="!pesanbutton">
   Masukkan tulisan.. apasaja
  </span><br>

  <textarea v-model="pesanbutton"></textarea><br>
  <button type="submit" v-show="pesanbutton">
   Kirim Tulisan
  </button>
 </form>

 <pre>
  {{ $data | json}} <!--fungsi json untuk mengirim data yang di ubah -->
 </pre>



</div>

<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
new Vue({
  el: '#app', // bind to view
  data: { //var adata yang menimpan nilai di bawahnya
   pesan : '', //variable pesan
   pesan2 : '', // var pesan 2
   pesanbutton : '' // var pesan
  }
 });

</script>
</body>
</html>

Nah itu adalah contoh dari penggunaan framework vue.js untuk validasi. Berikutnya pada tutorial ke 5 saya akan menjelaskan tentang Event Handling pada Vue.js dengan contoh dan penjelasan yang insyaalah lengkap.

Tutorial Vue.Js Bagian 4 : Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js

Share this

Author : zenhuzaini

Related Posts