vue指令-v-model修饰符

1、目标

让v-modelv-mode拥有更强大的功能

2、语法

v-model.修饰符=“Vue数据变量”
.number 以parseFloat转成数字类型
.trime 去除首位空白字符
.lazy 在change时触发而非input时

示例1

<template>
  <div id="app">
    <div>
      <span>年龄:</span>
      <input type="number" v-model.number="age">
    </div>
   
    
  </div>
  
</template>

<script>


export default {
  data(){
    return{
      
      age:0
      
    }
    
  },
  
  
  
  
}
</script>

示例2

<template>
  <div id="app">
    <div>
      <!--.trim去除首尾空格-->
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
   
    
  </div>
  
</template>

<script>


export default {
  data(){
    return{
      
      motto:""
      
    }
    
  },
  
  
  
  
}
</script>

示例3

<template>
  <div id="app">
    <div>
      <!--.lazy失去焦点同步数据-->
      <span>个人简介:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
   
    
  </div>
  
</template>

<script>


export default {
  data(){
    return{
      
      intro:""
      
    }
    
  },
  
  
  
  
}
</script>