Vue表单神器！轻松判断是否有改动，告别烦恼

今天来教你个简单实用的Vue技巧——怎么看表单有没有改动？你可能也遇到过这种情况：辛苦填写完了资料，想关闭页面却被提示有未存盘的改动，真的很让人烦恼对不对？这个小功能可以帮到你看看这些改动能不能保留，然后再问你是否要关页面，超级方便实用！

使用v-model指令绑定表单数据

想让Vue帮我处理这些栏位？no problem!只需把表单里的信息跟vue里的对应起来就成。瞧这v-model指令，不管你咋打字输入，轻轻松松，接力棒一传过去，Vue的数据瞬间就能拿到你新填的值！

看这段代码吧：

  

    
  


export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  }
}

html

这个东东，就是让你好好地使劲儿敲击键盘，无论输入了啥，都会原封不动的被Vue抓取到name属性上去。哪怕是之后更改了也好办，别担心，它都能记清楚每一个细微之处！

使用计算属性判断表单是否改变

别忘了在Vue小程序的表格部分用计算属性来判断有没有变动！比如那个问题，我们可以设个isDirty属性看下是不是“脏”了。

看下面这段代码：

  

    
    
表单是否改变: {{ isDirty }}
  


export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
  }
}

“`javascript

computed:{

isDirty(){

这个判断就是看名字有没有变，如果没变就返回true。

}

}

哈喽，要是表单的名字改了，不就说明有人捣乱改的吗？这样就能马上看出表单是否失调！

  

    
    
表单是否改变: {{ isDirty }}
  


export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
    this.$watch('name', (newValue, oldValue) => {
      if (newValue !== oldValue) {
        console.log('表单值改变')
        this.$emit('change') // 触发自定义事件change
      }
    })
  }
}

利用watch属性监听数据变化

哎呀妈Vue可不仅仅只会算属性，它还有个牛逼的 watch 功能，能立马察觉到数据变化，立马就帮你处理好这破事儿。特别是填表格的时候，简直太实用了！

watch:{

name(newVal, oldVal){

//做一些操作

哈喽！简单来说就是说，只要给手表加个看守员属性（watch），24小时盯紧名字属性（name）的改变。名字一有动静，咱们就可以耍点小花样，比如发出个”change”事件让头上那个大家伙躁动起来，然后它会处理所有接下来的事情。

使用v-once指令保存表单初始值

  

    
    
表单是否改变: {{ isDirty }}
  


export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.$el.querySelector('input').value
    },
    originalName() {
      return this.name // 返回表单的初始值
    }
  }
}

别发愁！只要使用这个超简单的方法就能保证初次填写的数据安全储存哦～就是“v-once”小工具！只需对某个元素轻轻一点，轻松实现数据绑定。

这个小程序的设计就是先记下你刚才输的第一个数，再用一个叫‘被修改过’的函数检查它和原始数是否匹配。main()，就是负责最后把最开始的那个值恢复出来哟。

说实在的Vue验表单真的很神奇！想怎么整就怎么整，不管是什么属性，计算属性，watcher属性还是v-once指令，都不是事！但是要记得，千万不要误删原有的数值，还要时刻看着是不是需要重新评估下。