2020-08-27 Vue表单修饰符，ref ，计算属性

表单修饰符

• lazy
  将 v-model 由原来 input事件改为 change事件触发

• number
  将v-model绑定的值，自动过滤成数字（按照parseFloat 顺序解析）（如果需要开头就是非数字字符，失去功能）

• trim
  去除开头结尾空格

ref 方便获取dom元素

Vue 尽量减少dom操作，以数据驱动为主

  

    
aaa
    
ppp
    dwdw
  
  

计算属性

语法:
      let vm = new Vue({
          data:{
                msg:'hello world'
          },
          computed:{
                msg2(){ // 写法是 方法 编译到实例上  是和 data中的属      性一样的 值（不是函数）
                return this.msg.split('').reverse().join('');
                }
            }
      })

注意：
    计算属性  名字 不能和 data（methods）中 已存在的 属性  重名
    计算不要去修改 计算属性的值  应该去修改 计算属性依赖的值

  如果需要修改计算属性
  计算属性 需要 使用 get和set的写法
  {
    data:{
      msg:'hello world'
    },
    computed:{
      msg2:{
        get(){
          return this.msg.split('').reverse().join('');
        },
        set(val){
           // 每一次修改  计算属性时，set触发，同时，修改的值，通过val传入
           this.msg = val;
        }
      }
    }
  }