vue的修饰符

---

前言

• 本篇文章是专门用来介绍vue的修饰符
• 包括了指令的修饰符,事件修饰符,按键修饰符,其它修饰符
• 了解常用的修饰符,使某些场景的开发变得更加简便

指令的修饰符

简介: 指令的修饰符包括了v-model的修饰符和v-bind的修饰符,这些都是一些比较常用的修饰符,有便于我们平常的开发

• v-model的修饰符
  v-model的修饰符分为3种.lazy,.trim,.number

  1. .lazy

  v-model在添加了.lazy修饰符之后只有等输入框失去焦点之后或者按下enter键才会显示输入的内容

     <template>
         <input v-model.lazy="demoText" type="text"/>
         <h1>{
      { demoText }}</h1>
     </template>
  

    ![.lazy示意](https://img-blog.csdnimg.cn/img_convert/94812afda97cb3a9b1324059d600ee1c.gif)
  

  2. .trim

  .trim修饰符会将双向绑定的内容的首尾空格进行去除,和字符串的trim方法效果是一致的,如果一直输入空格按钮,则绑定的值一直为''(空字符串),中间的空格是无法清除的。

      <template>
          // 如果输入demoText为 ' abc ' 则显示为:abc
          // 如果输入demoText为 'a bc ' 则显示为:a bc
          <input v-model.trim="demoText" type="text"/>
          <h1>{
      { demoText }}</h1>
      </template>
  

  3. .number<