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 ...
随机推荐
- luogu2604 [ZJOI2010]网络扩容
先做一遍普通的dinic 然后再更改源点为超级源,超级源向原源加一条capacity=k && cost=0的边,再加上有费用的边跑最小费用最大流 #include <iostr ...
- 图论trainning-part-1 E. Invitation Cards
E. Invitation Cards Time Limit: 8000ms Memory Limit: 262144KB 64-bit integer IO format: %lld Ja ...
- Leetcode 368.最大整除子集
最大整除子集 给出一个由无重复的正整数组成的集合,找出其中最大的整除子集,子集中任意一对 (Si,Sj) 都要满足:Si % Sj = 0 或 Sj % Si = 0. 如果有多个目标子集,返回其中任 ...
- 在ubuntu上安装npm
sudo apt install npm 执行上面的安装命令,会报错: Reading package lists... Done Building dependency tree Reading s ...
- POJ-1236 Network of Schools，人生第一道Tarjan....
Network of Schools 题意:若干个学校组成一个计算机网络系统,一个学校作为出发端连接着若干个学校,信息可以传送到这些学校.被链接的学校不需要再次与出发端相连,现在问你:A:最少选几个学 ...
- Scala基础知识[一]
摘要:在Scala 是 Scalable Language 的简写,是一门多范式(multi-paradigm)的编程语言.设计初衷是要集成面向对象编程和函数式编程的各种特性.Scala 运行在Jav ...
- ACM程序设计选修课——1081: 堆（BFS）
1081: 堆 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 26 Solved: 9 Description Input Output Sampl ...
- BZOJ 3227 [Sdoi2008]红黑树(tree) ——贪心 动态规划
首先可以想到一个贪心的方法,然后一层一层的合并. 也可以采用动态规划的方式,为了写起来好写,把点数*2+1,然后发现在本机上跑不过1500的数据. 交上去居然A掉了. 贪心 #include < ...
- SQLite数据库相关操作
一.创建数据库 这里创建了note便签数据表,字段有noteId.noteTitle.noteTime.noteInfo ); // TODO Auto-generated constructor ...
- SharedPreferences 存储数组+双击退出
public static void saveApkEnalbleArray(Context context,boolean[] booleanArray) { SharedPreferences p ...