实现效果:字符串的动态拼接

methods方法

html:

<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname" @keyup="getFullName">+
<input type="text" v-model="lastname" @keyup="getFullName">=
<input type="text" v-model="fullname">
</div>

js:

        let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullName() {
this.fullname = this.firstname + '+' + this.lastname;
}
}
});

watch方法

  • 值是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值
  • 值是函数名:不过这个函数名要用单引号来包裹
  • 值是包括选项的对象:选项有三个
  1.   第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  2.   第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  3.   第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
var vm = new Vue({
data: {
a: ,
b:
},
watch: {
a: function (newVal, oldVal) {
console.log('new: %s, old: %s', newVal, oldVal)
},
// 方法名
b: 'someMethod',
// 选项的对象
c: {
handler: function (newVal, oldVal) { /* ... */ },
deep: true,
immediate: true
}
}
})

实例:

html:

<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>

js:

        let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
watch: {
// 使用这个属性,可以监听 data 中指定数据的变化,
// 然后触发 watch 中对应的 function 处理函数
// 其中传参:第一个(newVal)是指改变后的值,第二个(oldVal)是原值
firstname: function (newVal, oldVal) {
// this.fullname = this.firstname + this.lastname;
this.fullname = newVal + '+' + this.lastname;
},
lastname: function (newVal, oldVal) {
// this.fullname = this.firstname + this.lastname;
this.fullname = this.firstname + '+' + newVal;
}
}
});

注意:虽然看起来 keyup 在这个例子中显得更简单,但是 watch 在一些无键盘点击操作时要监听改变会显得很有用。例如:监听路由地址改变 、购物车添加商品(因为数字变动不方便用事件监听)。还有 watch 不要用箭头函数的方式获取 newVal、oldVal,这样会导致 this 绑定错误

computed方法
html:

<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>

js:

    let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed:{
// 在 computed 中,可以定义一些属性,这些属性叫做【计算属性】,
// 本质就是一个方法,只是使用这些计算属性的时候,是把他们的名称,
// 之间当做属性来使用,并不会把计算属性当做方法调用; // 注意 1:计算属性在引用的时候,不要加小括号调用,直接当做普通属性去使用
// 注意 2:只要计算属性,这个 function 中,所用的任何 data 中的数据发生了变化,就会
// 立即重新计算这个计算属性的值,否则不会对计算属性从新求值
// 注意 3:计算属性的求值结构,会被缓存起来,方便下次直接使用
fullname:function () {
return this.firstname+'+'+this.lastname
}
}
});

三者区别

  • 计算属性(computed):一定要返回一个值,属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当做属性来使用,适合简单的计算;
  • 方法(methods):表示一个具体的操作,主要书写业务逻辑,通过调用执行;
  • 监听(watch):一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看做 computed 和 methods 的结合体

Vue中computed(计算属性)、methods、watch的区别的更多相关文章

  1. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  2. vue中computed计算属性与methods对象中的this指针

    this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...

  3. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  5. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  6. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  7. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  8. vue中computed、metfods、watch的区别

    一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...

  9. Vue中的计算属性和监听器(computed 与 watch)

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

随机推荐

  1. spring boot 发布自动生成svn版本号

    通过Jenkins构建发布spring boot项目时,常常有需求,需要把Svn的版本号更新到项目的版本上,通过有两种解决方案: 1. 通过shell命令对配置文件中的指定字符进行替换, 如: 配置文 ...

  2. ELK视频下载

    Elasticsearch , Logstash, Kibana 相关视频下载地址:Beats.Elastic Stack.ElasticSearch.Kibana.Logstash下载地址:链接:h ...

  3. IDEA导入Eclipse 非Maven的Web项目

  4. Mysql学习(一)之简单介绍

    数据库简介 数据库分类 关系型数据库:MySQL.Oracle.SQLServer.Access.db2.fox pro 文件型数据库:sqlite.mongodb 空间型数据库: 数据库分为两端 数 ...

  5. 关于ES5中的prototype与ES6中class继承的比较

    ES5:继承: 1.ES5:继承 通过原型链实现继承.子类的prototype为父类对象的一个实例,因此子类的原型对象包含指向父类的原型对象的指针,父类的实例属性成为子类原型属性 2.ES6 的继承 ...

  6. dubbo学习笔记一(服务注册)

    相关的资料 官方文档 官方博客 项目结构 项目说明 [lesson1-config-api] 是一个接口工程,编译后是jar包,被其他工程依赖 [lesson1-config-2-properties ...

  7. php连接阿里云mysql

    1.开启Mysql远程访问端口 现在服务器控制台,安全组那边开启3306端口 2.修改Mysql配置文件 vim /etc/mysql/mysql.conf.d/mysqld.cnf,找到bind-a ...

  8. ERA-interim

    数据介绍整理中... https://software.ecmwf.int/wiki/display/UER/Time-integrated+surface+solar+radiation+downw ...

  9. QT 给工程添加图片

    先打开如图的打开方式 然后我们看到以下的画面,选择下面的 然后我们选择如下:,这里我们要注意我们的图片资源有一定要和QRC资源在同一个文件夹中 之后我们通过在stylesheet里面设置来使用我们添加 ...

  10. zabbix监控,微信报警

    微信告警 访问这个地址创建企业微信   https://work.weixin.qq.com/