计算属性的setter和getter
computed的属性不仅可以写一个get方法,通过其他的值算出一个新值;同时,也可以设置set方法,通过设置一个值,来改变他相关联的值!而改变了相关联的值之后,又会引起fullName的重新计算,页面也会跟着显示新的内容!
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算属性的setter和getter</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="root">
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"},computed: function () {fullName: function f() {return this.firstName +" "+ this.lastName();}}});
</script>
</body>
</html>
computed属性:
当computed依赖的值发生变化时,他就会重新计算;当set函数中this.firstName和 this.lastName 是fullName依赖的值;属性变了,页面的内容也会跟着变化!
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算属性的setter和getter</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="root">{{fullName}}
</div><script>var vm = new Vue({el: '#root',data: {firstName: "gb",lastName: "lfy"},computed: {fullName: {get: function () {return this.firstName + this.lastName();},set: function (value) {// console.log(value);var arr = value.split(" ");this.firstName = arr[0];this.lastName = arr[1];}}}});
</script>
</body>
</html>
计算属性的setter和getter相关推荐
- 初识 Vue(10)---(计算属性的 setter 和 getter)
计算属性的 setter 和 getter 方法一: <!DOCTYPE html> <html lang="en"> <head><me ...
- 计算属性computed里面的getter和setter
参考一: 在 Vue 中,computed 的属性可以被视为是 data 一样,可以读取和设值,因此在 computed 中可以分成 getter(读取) 和 setter(设值),一般情况下是没有 ...
- Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例
1 插值操作 1.1 Mustache语法 也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
- 一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
- Vue源码之计算属性watcher
在之前的文章<Vue源码分析基础之响应式原理>和<Vue源码实现之watcher拾遗>中,我们学习了watcher的实现原理.紧跟着这几天准备花点时间学习下watcher在vu ...
- Vue的计算属性、侦听属性与过滤器解析
文章目录 知识点 计算属性 计算属性的基本使用 计算属性的 setter 和 getter 侦听属性 计算属性与侦听属性对比 过滤器 过滤器使用方法 过滤器应用场景 综合小练习 知识点 计算属性 计算 ...
- Vue项目中如何使用computed计算属性
文章目录 computed: 1.基本使用: 1.1 应用场景: 1.2 代码位置: 1.3 值: 2.复杂操作-结合data中数据: 3.计算属性写法演变: 3.1 计算属性的setter和gett ...
- Vue 第一天: 计算属性和观察者
计算属性和观察者 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 《Ember.js实战》——2.3 计算属性
本节书摘来自异步社区<Ember.js实战>一书中的第2章,第2.3节,作者:[挪]Joachim Haagen Skeie(乔基姆•哈根•斯基)著,更多章节内容可以访问云栖社区" ...
最新文章
- 阿里巴巴的云原生应用开源探索与实践
- 地铁译:Spark for python developers --- 搭建Spark虚拟环境 4
- java 怎么把list流化_Java 中的数据流和函数式编程
- Druid 常见问题
- dedecms 文章回收站 记得及时清理
- sqlhelper中事务的简单用法(初学者)
- Deep Q-learning
- scrapy xpath空列表_我的第一个爬虫——Scrapy爬虫详细操作入门指南(1)
- Matlab读取TXT文本文件通用程序
- C语言删除数组中的重复元素(详细分析版)
- CHM 打开时提示 已取消到该网页的导航
- 五、NLP聊天语料处理
- RAFT共识算法学习
- 如何操作 Office Open XML 格式文档(转)
- Selenium WebDriverException unable to discover open pages
- OpenART mini使用教程
- FckEditor中文配置手册详细说明
- 角度距离计算坐标公式
- SaaS模式金融危机显威力 呼叫中心进入云时代
- 小型书店管理系统MySQL_小型书店管理系统数据库设计.docx
热门文章
- 坚持早起21天,每月多赚1000+ (文末有惊喜)
- 安装mysql无法登录_【windows 下安装 mysql-server 无法登录问题解决】
- 1185 城市名排序
- Bootstrap 导入js文件,浏览器找不到文件问题
- 开发者都应该使用的10个C++11特性
- OpenTSDB 开发指南之 查询数据
- 阿里云超算异构Spot集群,助力深势科技30%成本驱动MDaaS海量算力
- 与变异风险词赛跑 阿里探索AI治理网络风险
- 携程赴港二次上市在即 “旅游营销枢纽”战略助价值重估
- 深夜,我偷听到程序员要对session下手......