vueのイベント

vueのイベント

by techyankee

HTML

<div id="app">
  <hello-component></hello-component>

  <p>
    <input type="text" v-model="message">
  </p>
  <p>
    <input type="text" v-model="message">
  </p>


  <button v-on:click="onclick">
    Click!
  </button>
  
  <p>
  {{ now }}
  </p>
</div>



<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

JavaScript

Vue.component('hello-component',{
	template: '<p>Hello</p>'
})


var app = new Vue({
	
	el: '#app',
  
  data: {
  	now: '',
    
toggle: true,
      
    message: 'Hello Vue.js',
        count: 10,
        user: {
          lastname: 'yamada',
          firstname: 'Taro',
          prefecture: 'Tokyo'
        },
        colors: ['Red', 'Green', 'Blue']
  },
  
  methods: {
  	onclick: function() {
      this.now = new Date().toLocaleString();
  	}
  }

})