【Vuejs】CDN版でクリックイベントで現在の日付時刻を取得するボタンを作る

JavaScript

2022.06.25 2022.06.19

この記事は約3分で読めます。

今回はVue.JS(CDN版)でv-on:clickを使って要素をクリックした際にVueインスタンスで定義した関数を実行する方法について紹介します。

この記事ではその具体例として、クリックすると現在時刻を画面上に表示させるボタンを実装していきます。

これまでの記事

クリックで現在の日付と時刻を取得するボタンを作る

click="onClick"でボタンをクリックすると<app.js>のonClickという関数が実行されます。

<index.html>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="app">
<button v-on:click="onClick">更新</button>

<p>{{ now }}</p>
 
</div>
</body>
</html>
<script>
var app = new Vue({
  el: '#app',
  data: {
    now:''
},
methods: {
onClick: function () {
    this.now = new Date().toLocaleString();
    }
}
})
</script>