vueでのv-model修飾子の使用


<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.lazy   -->
  <!--    .lazy      ,        ,
           ,                -->
  <input type="text" v-model.lazy="message">
  <h2>{
     {
     message}}</h2>

<!--  2.number   -->
  <!--.number  ,        number                  -->
  <input type = "number" v-model.number="age">
  <h2>{
     {
     typeof age}}</h2>

<!--  3.trim   -->
<!---->
  <input type="text" v-model.trim="name">
  <h2>      {
     {
     name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      message: '   !!!',
      age:0,
      name:''
    }
  })
</script>
</body>
</html>