Vue~如何使用侦听属性

作者: 爱上别的吧 | 来源:发表于2019-10-21 17:26 被阅读0次

在实际开发工作中,我们经常需要去监听一些数据的变化,从而执行相应的操作,而Vue则提供了watch功能来满足我们的需求,下面使用一个限制用户输入字数的简单例子来直观的体现watch如何使用

<template>
  <div class="feedback">
    <p>问题描述</p>
    <textarea v-model="info"></textarea>
  </div>
</template>

<script>
export default {
  name: 'feedback',
  data () {
    return {
      info: ''
    }
  },
  watch: {
    info: function (newValue, oldValue) { // 当info的值发生变化时,则会自动执行此函数
      if (newValue.length > 10) {
        this.info = oldValue
      }
    }
  }
}
</script>

相关文章

  • Vue~如何使用侦听属性

    在实际开发工作中,我们经常需要去监听一些数据的变化,从而执行相应的操作,而Vue则提供了watch功能来满足我们的...

  • vue侦测数据变化

    如何使用watch侦听数据变化?如何通过计算属性computed配合watch属性来侦听数据变化?深度侦听与单一属...

  • vue2.0源码解读 - 计算属性computed

    计算属性 VS 侦听属性Vue 的组件对象支持了计算属性 computed 和侦听属性 watch 2 个选项,很...

  • 2019-01-26

    # VUE的计算属性,方法,侦听器 (1)计算属性,方法,侦听器 ``` {{fullName}} {{fullN...

  • VUE--(2)计算属性和侦听器

    写在最前面 上篇的vue的使用 说了vue生命周期、vue实例、模板语法。这次我们来说vue的计算属性和侦听器 计...

  • 4.vue计算属性,方法和侦听器

    1.vue计算属性,方法和侦听器 2.vue计算属性的set和get方法

  • Vue进阶

    Vue实例 Vue实例生命周期函数 Vue模板语法 Vue计算属性、方法、侦听器 Vue计算属性的setter和g...

  • vue源码解析响应式原理(watch)

    上一篇我们分析了computed ,这篇我们接着分析侦听属性watch。侦听属性的初始化也是发生在 Vue 的实例...

  • 关于Vue中侦听器实现侦听对象的方法

    Vue中不能侦听到对象内部属性的变化,要侦听对象内部熟悉的变化,必须这么写:

  • 2019-02-23

    vue 核心之一 计算属性computed 和侦听属性watch 对于很多初学vue的初级前端开发工程而言,在了解...

网友评论

    本文标题:Vue~如何使用侦听属性

    本文链接:https://www.haomeiwen.com/subject/veztvctx.html