vue 计算属性与侦听器
侦听器：顾名思义，就是用来监听数据变化用的。侦听器在vue实例中，定义变量watch来使用。监听新值newVal和旧值oldVal，具体使用方法如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue侦听器与计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style> </style>
</head> <body>
<div class="myApp">
<p>{{msg}}</p>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
msg:'hello vue!'
},
watch: {
msg: function (newVal, oldVal) {
console.log('oldVal=' + oldVal);
console.log('newVal=' + newVal);
}
}
});
</script>
</body> </html>
上面是一个简单的示例，watch监听的是变化的数据，可以监听新数据和老数据，我们可以使用Chrome的控制台来修改msg的值进行一下测试：
如果只是监测一个变量值的变化，推荐使用watch，官网上还有一个复杂一些的例子，感兴趣的同学，可以去看看https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8，如果要监测两个以上变量的情况，最好还是使用计算属性computed，为什么这么说呢，我们可以看一下下面的例子：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue侦听器与计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
</style>
</head> <body>
<div class="myApp">
<p>firstName：{{firstName}}</p>
<p>lastName：{{lastName}}</p>
<p>fullName：{{fullName}}</p>
<p>xing：{{xing}}</p>
<p>ming：{{ming}}</p>
<p>quanming：{{quanming}}</p>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar',
xing: 'zhang',
ming: 'san',
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val
}
},
computed: {
quanming: function(){
return this.xing + ' ' + this.ming;
}
}
});
</script>
</body> </html>
从上面的例子，我们可以看出，同样的功能，使用computed要比watch更简洁。
上一篇文章说到，在数据绑定双花括号中，我们可以使用表达式，但是，有些复杂的表达式，如果用到的地方比较多，那其实是不太方便的，这时候，就可以使用computed了，示例如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue侦听器与计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
</style>
</head> <body>
<div class="myApp">
<p>Original message: "{{ msg }}"</p>
<p>Computed reversed message: "{{ reversedMsg }}"</p>
<p>Reversed message: "{{ reversedMsg1() }}"</p>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
msg: 'hello vue'
},
computed: {
reversedMsg: function() {
return this.msg.split('').reverse().join('')
}
},
methods: {
reversedMsg1: function() {
return this.msg.split('').reverse().join('')
}
}
});
</script>
</body> </html>
仔细看上面的例子中，反转字符串我使用了两种方法，一个是使用computed，另一个是在表达式中调用方法来实现，这两个方法有什么区别呢？其实，使用computed，是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
computed计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue侦听器与计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
</style>
</head> <body>
<div class="myApp">
<p>firstName：{{firstName}}</p>
<p>lastName：{{lastName}}</p>
<p>fullName：{{fullName}}</p>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
firstName: 'john',
lastName: 'doe'
},
computed: {
fullName:{
get: function(){
return this.firstName + ' ' + this.lastName;
},
set: function(newVal){
var names = newVal.split(' ');
this.firstName = names[0];
this.lastName = names[names.length -1];
}
}
}
});
</script>
</body> </html>
在Chrome的控制台，输入myApp.fullName = 'zhang san'，就可以看到页面上的名字被重新设置了。
vue 计算属性与侦听器的更多相关文章
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
- 15 Vue计算属性和侦听器
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的. 在模板中放入太多的逻辑会让模板过重且难以维护.例如: split = 字符中间空格分割, reverse= 反转 join('' ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- VueJs(7)---计算属性和侦听器
计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...
随机推荐
- Python基础数据类型之集合
Python基础数据类型之集合 集合(set)是Python基本数据类型之一,它具有天生的去重能力,即集合中的元素不能重复.集合也是无序的,且集合中的元素必须是不可变类型. 一.如何创建一个集合 #1 ...
- 九度oj 1480
题目描述: 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的.对于给定的一个序列(a1, a2, ...,aN),我们可以得到一些上升的子序列( ...
- hdu6060[贪心+dfs] 2017多校3
/* hdu6060[贪心+dfs] 2017多校3*/ #include <bits/stdc++.h> using namespace std; typedef long long L ...
- HDU——2955Robberies（小数背包）
Robberies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- HDU 4609 3-idiots ——FFT
[题目分析] 一堆小木棍,问取出三根能组成三角形的概率是多少. Kuangbin的博客中讲的很详细. 构造一个多项式 ai=i的个数. 然后卷积之后去重. 统计也需要去重. 挺麻烦的一道题. #inc ...
- [BZOJ1604] [Usaco2008 Open]Cow Neighborhoods 奶牛的邻居（好题）
传送门 良心题解 #include <set> #include <cstdio> #include <iostream> #include <algorit ...
- 2013 年 acm 长春现场赛
A - Hard Code Hdu 4813 题目大意:给你一坨字符串,让你输出其栅栏密码的解码形式 思路:水题模拟 #include<iostream> #include<cstd ...
- json格式前端显示
使用angular可以稍加修改. [转]http://web.jobbole.com/82865/ function output(inp) { document.body.appendChild(d ...
- 【BZOJ2049】洞穴勘测（LCT）
题意:一张图,要求支持以下操作: 1.加边 2.删边 3.询问两点之间是否联通 100%的数据满足n≤10000, m≤200000 思路:LCT裸题,不需要维护任何信息 ..,..]of longi ...
- *Codeforces989D. A Shade of Moonlight
数轴上$n \leq 100000$个不重叠的云,给坐标,长度都是$l$,有些云速度1,有些云速度-1,风速记为$w$,问在风速不大于$w_{max}$时,有几对云可能在0相遇.每一对云单独考虑. 多 ...