2. Menampilkan Waktu dan Tanggal dengan Vue.js
Jadi pada percobaan selanjutnya, aku mencoba menampilkan tanggal dan waktu dalam pop up dengan menggunakan vue.js. Adapun langkah sederhana yang bisa kita lakukan diantaranya :
- Buat file baru, misalnya percobaan_1.php
- Kemudian isi file tersebut dengan coding html biasa dan isi bagian body dengan program seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title></title>
<script src=”../vue.js”></script>
</head><body>
<div id=”app-2">
<span v-bind:title=”message”>
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div><script>
var app2 = new Vue({
el: ‘#app-2’,
data: {
message: ‘You loaded this page on ‘ + new Date().toLocaleString()
}
})
</script>
</body>
</html>
Dalam percobaan diatas kita mengambil id dengan nama #app-2 kemudian memparsing message kedalam tulisan yang kita inputkan dalam vue. kalimat yang kita inputkan disana adalah you loaded this page on + new Date().toLocaleString(). Perintah inilah yang digunakan untuk menampilkan tanggal dan waktu. v- artinya kita menggunakan vue. bind:title kita melalukan program didalam title.
- Jika berhasil ketika kita run maka akan muncul tampilan sebagai berikut :
