Vue2.0侦听器watch属性代码详解-创新互联

用法

10年积累的成都网站建设、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有渝中免费网站建设让你可以放心的选择与我们合作。

--------------------------------------------------------------------------------

先来看看官网的介绍:

官网介绍的很好理解了，也就是监听一个数据的变化，当该数据变化时执行我们的watch方法,watch选项是一个对象，键为需要观察的表达式(函数),还可以是一个对象，可以包含如下几个属性:

            handler        　　;对应的函数               　　　　           ;可以带两个参数，分别是新的值和旧的值，上下文为当前Vue实例
            immediate    　　;侦听开始之后是否立即调用　　　　;默认为false
            sync        　　　;波尔值，是否同步执行，默认false     ;如果设置了这个属性，当数据有变化时就会立即执行了，否则放到下一个tick中排队执行

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{message}}</p>
    <button @click="test">测试</button> 
  </div>
  <script>
    var app = new Vue({
      el:'#app',
      data:{message:'hello world!'},
      watch:{
        message:function(newval,val){
          console.log(newval,val)
        }
      },
      methods:{
        test:()=>app.message="Hello Vue!"
      }
    })
  </script>
</body>
</html>

新闻标题：Vue2.0侦听器watch属性代码详解-创新互联
转载源于：https://www.cdcxhl.com/article48/dgseep.html

成都网站建设公司_创新互联，为您提供定制网站、外贸网站建设、网站导航、Google、关键词优化、网站营销

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容