vuejs中的计算属性和监视
计算属性
1.在computed属性对象中定义计算属性的方法,在页面上使用{{方法名}}来显示计算结果
2.通过getter/setter实现对属性数据的显示和监视
3.计算属性存在缓存,多次读取只执行一次getter
侦听属性
1.通过vm对象的$watch()或watch配置来监视指定的属性
2.当属性变化时,回调函数自动调用,在函数内部进行计算
计算属性与方法、侦听属性之间的比较
计算属性是基于它们依赖进行缓存,只有相关依赖发生改变时才会重新求值,调用方法是每当重发重新渲染时,总会调用执行函数。而侦听属性可以实现相应数据变动,但是它对需要侦听的属性编写重复的代码。但是watch在异步操作数据变化时很合适。
举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br> <p>{{fullName1}}</p>
<p>{{getFullName()}}</p>
</div> <!--<script type="text/javascript" src="../js/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A-B'
},
methods: {
getFullName: function () {
return this.firstName + '-' + this.lastName
}
}, // 计算属性配置: 值为对象
computed: {
fullName1() { // 属性的get()
// console.log('fullName1()', this)
return this.firstName + '-' + this.lastName
}, fullName3: {
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get() {
console.log('fullName3 get()')
return this.firstName + '-' + this.lastName
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set(value) {// fullName3的最新value值 A-B23
console.log('fullName3 set()', value)
// 更新firstName和lastName
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
},
},
}, watch: {
// 配置监视firstName
firstName: function (value) { // 相当于属性的set
console.log('watch firstName', value)
// 更新fullName2
this.fullName2 = value + '-' + this.lastName
},
lastName: function (value) {
this.fullName2 = this.firstName + '-' + value;
}
} }) </script>
</body>
</html>
运行结果中fullName1和fullName2数据传输是“单向”的(输入firstname和lastname时fullname会相应变化,但是反过来就不行),fullName3实现数据传输双向的,当输入fullname时,firstname和lastname会相应的改变。get为取值,set为赋值
vuejs中的计算属性和监视的更多相关文章
- Vue的计算属性,监视属性代码理解
1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- VUE:计算属性和监视
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习-第三个DEMO(计算属性和监视) v-model基础用法
<div id="demo"> 姓:<input type="text" placeholder="First Name" ...
- vue2.0中的计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...
- Vue中的计算属性和监听器(computed 与 watch)
react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...
随机推荐
- 【Leetcode】【Easy】Balanced Binary Tree
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- mysql 统计连续天数
以下为例子数据 图1 图1 首先根据要求取出BeforeMeal要在7.0以下 并且 bingAfterMeal要在11.1以下 select AccountId,CreateTime from Di ...
- May 17th 2017 Week 20th Wednesday
Men are nearly always willing to believe what they wish. 人总爱想入非非,把愿望变成现实. It is just the humancondit ...
- March 5 2017 Week 10 Sunday
If you do what you love, you will never work a day in your life. 做你所爱的事情,你就不会觉得是在工作. Today, one mach ...
- 解决SQLite打开已有路径下的db问题
最近遇到的需要加载已有路径下(sd card下)db的问题,找了一下资料,以下是解决的方法,仅供参考(转载自eoe): SQLiteOpenHelper 是Android框架为我们提供的一个非常好的数 ...
- NODE-windows 下安装nodejs及其配置环境
相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼.有关nodejs的相关资料网上已经铺天盖地.由于它的高并发特性,造就了其特殊的应用地位. 国内目前关注最高,维护 ...
- QT学习之窗口右键菜单
#QT学习之窗口右键菜单 QWidget 及其子类都有右键菜单,主要因为其有两个与右键菜单相关联的函数: Qt::ContextMenuPolicy contextMenuPlicy() const ...
- IOS AFN请求 总结
一.2大管理对象 1.AFHTTPRequestOperationManager* 对NSURLConnection的封装 2.AFHTTPSessionManager* 对NSURLSession的 ...
- 模线性方程&&中国剩余定理及拓展
一.求解模线性方程 由ax=b(mod n) 可知ax = ny + b 就相当于ax + ny = b 由扩展欧几里得算法可知有解条件为gcd(a, n)整除d 可以直接套用扩展欧几里得算法 最终由 ...
- [18/12/01]super 关键字和final 关键字
一.super 关键字 1.super是直接父类对象的引用.可以通过super来访问父类中被子类覆盖的方法或属性. 使用super调用普通方法,语句没有位置限制,可以在子类中随便调用. 代码示例: c ...