vue-12- 事件修饰符+计算属性-复习

事件修饰符：

 <!-- 减轻浏览器的压力 失去焦点并且内容发生改变才更新 .lazy是@change的语法糖-->
    <input type="text" v-model.lazy="mytext">
   
     <br>
    <!-- .number 将用户输入的自动转换为数字  -->
    <input type="text" v-model="mynumber1">

    <br>
    <input type="text" v-model.number="mynumber2">

    <!-- .trim 默认自动去除用户输入内容中两端的空格  -->
    <inputv-model.trim="msg"/>

---

计算属性：

 <div id="box">
    <!--不推荐 模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护 -->
    {{myname.substring(0, 2).toUpperCase() + myname.substring(2)}}
    <br>
    计算属性： {{myasd}}
    <br>
    方法属性：{{mymethods()}}
  </div>

     data() {
        return {
          "myname": "asdasd"
        }
      },

      methods: {
        mymethods() {
          return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)

        }
      },

      // 计算属性有缓存
      computed: {
        myasd() {
          return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
        }
      }