1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果

 //计算属性
computed:{
// 计算属性值的一个方法,方法的返回值是属性值,初始化显示或者DATA数据发生改变时调用
fullName1(){
console.log('fullName1()')
return this.firstName + ' ' + this.lastName
}
},
fullName3: {
//回调函数:1.自己定义的 2.没有调用的 3.最后执行了的
get() {
return this.firstName + ' ' + this.lastName
},
set(value) {
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
},

2.监视属性:通过vm对象的$watch()或watch配置来监视指定的属性,当属性变化时,回调函数自动调用,在函数内部进行计算

//监视属性
watch:{
firstName: function (value) {
this.fullName2 = value + ' ' + this.lastName
}
}
})
//VM的一个实例,也是方法
vm.$watch('lastName',function(value){
this.fullName2 = this.firstName + ' ' +value

  

Vue的计算属性,监视属性代码理解的更多相关文章

  1. vue的计算和监视属性,附一小实例

    1. 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2. 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性 ...

  2. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  3. VUE:计算属性和监视

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  5. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  6. 3. Vue语法--计算属性

    一. 计算属性 1. 什么是计算属性? 通常, 我们是在模板中, 通过插值语法显示data的内容, 但有时候我们可能需要在{{}}里添加一些计算, 然后在展示出来数据. 这时我们可以使用到计算属性 先 ...

  7. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  8. Vue的计算属性和侦听器

    1 计算属性:他是根据对象已有的属性计算出新的属性值.具有缓存的功能,如果原始属性不变,则用缓存.否则,重新计算. 前端 <form> <label>姓</label&g ...

  9. vue生命周期以及vue的计算属性

    一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...

随机推荐

  1. Hadoop OutputCommitter

    1. OutputCommitters MapReduce使用一个提交协议来确保作业(job)和任务(task)都完全成功或失败.这个通过 OutputCommiter来实现. 新版本 MapRedu ...

  2. python正则表达式 - re

    1,匹配符号 任意字符 . : 任意字符,除了\n,flags设置为DOTALL(S)可以让.匹配\n []字符集合,字符组:规范/元字符不同于正则式主体 [0-9] : 数字 [A-Z] : 大写字 ...

  3. WIN10下Java环境变量配置

    首先,你应该已经安装了 Java 的 JDK 了(如果没有安装JDK,请跳转到此网址:http://www.oracle.com/technetwork/java/javase/downloads/i ...

  4. 8.1 GOF 设计模式:关于设计模式

    关于设计模式…Design Pattern  追求永恒的美1.1 “模式”一词的起源 “每个模式描述了: 一个在我们周围反复出现的问题, 然后是针对这个问题的解决方案. 这样,其他人可以无数次地反复 ...

  5. 『计算机视觉』YOLO系列总结

    网络细节资料很多,不做赘述,主要总结演化思路和解决问题. 一.YOLO 1.网络简介 YOLO网络结构由24个卷积层与2个全连接层构成,网络入口为448x448(v2为416x416),图片进入网络先 ...

  6. JavaScript进阶系列1:performace和console.time性能测试

    测试性能的时候,三种方法: 1.使用new Date() 返回整数值ms var dtStart=new Date(); for(var i=0;i<15000;i++){ i=i; } var ...

  7. CentOS 7 + MySql 中文乱码解决方案

    原文:https://blog.csdn.net/qq_32953079/article/details/54629245,亲测有效,故记录之. 一.登录MySQL查看用SHOW VARIABLES ...

  8. 用tar压缩xz格式出错

    解决办法 安装xz软件包 yum install xz -y

  9. 2018的flag

    1.leetcode刷到medium的题目不吃力 2.坚持记录自己的独特感悟 3.找到好的工作或者实习,二战计划再看吧 4.好好完成毕设,为大学生活画上完满句号

  10. 欧姆龙PLC CP1E型号的90,91,190

    I/O存储区的CIO区,输入位CIO0-CIO99 对于NA型,模拟输入0和1将分别占用CIO90和CIO91 输出位CIO100-CIO199,对于NA型,模拟输出0将占用CIO190