Vue.js中的$watch方法有什么用

Vue.js中的$watch方法有什么用

这篇文章主要介绍“Vue.js中的$watch方法有什么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue.js中的$watch方法有什么用”文章能帮助大家解决问题。

代码如下：

// 键路径  vm.$watch('a.b.c', function (newVal, oldVal) {   // 做点什么  })  // 函数  vm.$watch(   function () {    return this.a + this.b   },   function (newVal, oldVal) {    // 做点什么   }  )

vm.$watch 返回一个取消观察函数，用来停止触发回调：

var unwatch = vm.$watch('a', cb)  // 之后取消观察  unwatch()

博主很认真地看了看，当时就懵逼了，没看懂。还好网上大神多，查了查终于搞明白这个$watch方法的用法了。说白了$watch这货就是观察一个值的变化，观察的这个值一变化的话，那么就执行function里面的语句。废话不多说，咱们直接看代码：

HTML：

<div id="watch">      firstName:<input type="text" name="li" v-model="firstName">      <br>      lastName:<input type="text" name="fei" v-model="lastName">      <p>fullName: {{fullName}}</p>  </div>

JS：

var vm = new Vue({        el: '#watch',        data: {          firstName: 'a',          lastName: 'fei',          fullName: 'a fei'        },        watch: {          firstName: function (val) {            this.fullName = val + ' ' + this.lastName          },          lastName: function (val) {            this.fullName = this.firstName + ' ' + val          }        }  })

关于“Vue.js中的$watch方法有什么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注高防服务器网行业资讯频道，小编每天都会为大家更新不同的知识点。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[