vue computed和methods 计算属性和侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Reversed message: "{{ reversedMessage2() }}"</p>
</div>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter,有缓存
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
// 在组件中，方法无缓存
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。
如果你不希望有缓存，请用方法来替代。
计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed,methods,watch</title>
<div id="app">
{{fullName}}
{{age}}
</div>
</head>
<body>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript"> var app = new Vue({
el: '#app',
data: {
firstName: 'Dell',
lastName: 'Lee',
age: 28
},
computed: {
fullName: function() {
console.log('计算了一次');
return this.firstName + ' ' + this.lastName;
}
}
}) </script>
</body>
</html>
方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed,methods,watch</title>
<div id="app">
{{fullName()}}
{{age}}
</div>
</head>
<body>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript"> var app = new Vue({
el: '#app',
data: {
firstName: 'Dell',
lastName: 'Lee',
age: 28
},
methods: {
fullName: function() {
console.log('计算了一次');
return this.firstName + ' ' + this.lastName;
}
} }) </script>
</body>
</html>
watch 侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<div>
{{fullName}}
{{age}}
</div>
</div> <!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Tom',
lastName: 'Lee',
fullName: 'Tom Lee',
age: '33'
},
watch: {
firstName: function(){
console.log('计算了一次');
return this.fullName = this.firstName + ' ' + this.lastName;
},
lastName: function(){
console.log('计算了一次');
return this.fullName = this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
computed性能最好
vue computed和methods 计算属性和侦听器的更多相关文章
- vue入门：（计算属性和侦听器）
methods watch computed 一.methods-方法 在数据渲染是需要基于多个数据时第一种方法,可以采用methods属性中的方法计算返回值来实现,先来看示例: <div id ...
- Vue学习笔记之计算属性和侦听器
0x00 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split(''). ...
- vue 自学笔记(三) 计算属性与侦听器
一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 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之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 出现异常： 非介入式客户端验证规则中的验证类型名称必须唯一。下列验证类型出现重复: required
在将web.config文件中的<add key="ClientValidationEnabled" value="false" /> 设为fals ...
- Cannot proxy target class because CGLIB2 is not available .Add CGLIB to the class path or specify proxy interfaces…..
报错:Cannot proxy target class because CGLIB2 is not available .Add CGLIB to the class path or specify ...
- 【记录】gitLab git命令add commit fetch pull push
最近项目使用git进行版本控制,由于之前用svn,所以对git不是太熟悉,网上一通乱找git各命令含义, 以下内容感觉讲的很详细,可以很清楚理解git提交流程,博主把重要的信息用红字标注了,更加显眼. ...
- 我的黑苹果之路 9400f + msi b360 mortar + 1050ti
硬件配置: CPU:i5 9400f 主板:微型msi迫击炮B360 内存:威刚 ddr4 8g 2133 *2 显卡:技嘉1050ti 4g 显示器:koiso 4K (使用的dp接口连接,hdmi ...
- 【Luogu】【关卡2-14】 树形数据结构（2017年10月）【AK】
任务说明:由一个根节点分叉,越分越多,就成了树.树可以表示数据之间的从属关系 P1087 FBI树 给一个01字符串,0对应B,1对应I,F对应既有0子节点又有1子节点的根节点,输出这棵树的后序遍历. ...
- 启动Process实现多任务
from multiprocessing import Process import time '''multiprocessing模块1.跨平台的多进程模块2.提供了一个Process类的实例代表一 ...
- delphi 窗体的位置和高宽度-TForm:Letf、Top、Width、Height、ClientWidth、ClientHeight
delphi 窗体的位置和高宽度-TForm:Letf.Top.Width.Height.ClientWidth.ClientHeight [窗体的高度和宽度]: [客户区的高度和宽度]: [窗体在屏 ...
- ajax 实战使用
注意ajax 必须放在script脚本中使用 ajax用于前端朝后端提交数据,并且后端函数处理好结果返回给success函数作为回调函数给前端,前端拿到后端传来的值,比如code==0 来做相应的前端 ...
- sql update语句
如果要更新数据库表中的记录,我们就必须使用UPDATE语句. UPDATE语句的基本语法是: UPDATE <表名> SET 字段1=值1, 字段2=值2, ... WHERE ...; ...
- 深入理解js——构造函数的继承
看了阮一峰的网络日志(http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html),记录一下构 ...