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 ...
随机推荐
- Matplotlib基本图形之条形图2
Matplotlib基本图形之条形图2 1.绘制多条条形图 示例代码: import time import numpy as np import matplotlib.pyplot as plt b ...
- python类可以截获Python运算符
类可以截获Python运算符 现在,让我们来看类和模块的第三个主要差别: 运算符重载.简而言之,运算符重载就是让用类写成的对象,可截获并响应用在内置类型上的运算:加法.切片.打印和点号运算等.这只是自 ...
- HDU-1030 Delta-wave ，暴力贪心！
Delta-wave 题意:用图中所示的数字填满这个三角形,求n到m的最短路径,也就是最少通过几条边. 思路:简单贪心就可以了,本人是先将每一层的左右端点用结构体存起来,然后分奇偶判断. 这题必须理清 ...
- msp430项目编程57
msp430综合项目---扩展项目七57 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结
- MongoDB GridFS(命令行+php操作)
一.GridFS是什么 & 为什么需要它 我们知道目前MongoDB的BSON文件最大只能是16M,也就是说单个文档最多只能存储16M的数据,那么如果需要MongoDB存储超过16M的大文件该 ...
- Linux 下 GCC 编译共享库控制导出函数的方法
通过一些实际项目的开发,发现这样一个现象,在 Windows 下可以通过指定 __declspec(dllexport) 定义来控制 DLL(动态链接库)中哪些函数可以导出,暴露给其他程序链接使用,哪 ...
- （5）ASP.NET Core 中的静态文件
1.前言 当我们创建Core项目的时候,Web根目录下会有个wwwroot文件目录,wwwroot文件目录里面默认有HTML.CSS.IMG.JavaScript等文件,而这些文件都是Core提供给客 ...
- 10.Java web—JavaBean
定义一个类,然后在jsp页面通过<jsp:useBean>标签调用 重点是类属性名要起得规则,一般是setXXX getXXXX 新建一个类UserInfo public class U ...
- django : related_name and related_query_name
This post is about two Django ForeignKey parameters related_name related_query_name See an example b ...
- SpringMVC拦截器详解[附带源码分析]（转）
本文转自http://www.cnblogs.com/fangjian0423/p/springMVC-interceptor.html 感谢作者 目录 前言 重要接口及类介绍 源码分析 拦截器的配置 ...