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 ...
随机推荐
- springMVC的数据封装
编写实体类: package cn.mepu.domain; /** * @User 艾康 * @create 2019-11-12 13:56 */ public class User { priv ...
- 【最新】docker 安装elasticsearch + kibana步骤【第一篇_elasticsearch】
最近在用docker 安装elasticsearch + kibana 遇到了很多坑,最后成功安装elasticsearch + kibana (6.8.1)版本 安装了一下午,现总结过程中遇到 ...
- KiCAD层颜色修改
KiCAD层颜色修改 KiCAD的PCB各层的颜色太过于暗淡,有时可能不适合操作者的习惯,尤其是铜层(布线层),这时候就需要去修改层的颜色,具体操作如下图:选择想要修改的层,双击左边颜色框框,进入之后 ...
- RMI远端方法调用
一.RMI介绍 RMI(Remote Method Invocation),RMI是分布式对象软件包,它简化了在多台计算机上的JAVA应用之间的通信.必须在jdk1.1以上,RMI用到的类:java. ...
- CSIC_716_20191216【pymysql模块】
强调:mysql要设置严格模式,在my.ini 配置文件中 sql-mode="strict_trans_tables,only_full_group_by" ,设置完要重启 ...
- cmake README.TXT
{ cmake .//在当前路径下构建项目 cmake --build .//在当前路径下生成项目(默认为debug)//cmake --build . --config release//在当前路径 ...
- CF1016F 【Road Projects】
思路 可以考虑另一种想法:因为我们发现,答案是肯定不会大于在原来的树上的最短路径的.所以原来的最短路是(有可能的)最大值! 我们把树变成这样,提取出1~n的路径,方便观看撕烤: (它有个我起的名字,叫 ...
- thinkphp5.0多条件模糊查询以及多条件查询带分页如何保留参数
1,多条件模糊查询 等于:map[‘id′]=array(‘eq′,100);不等于:map[‘id′]=array(‘eq′,100);不等于:map[‘id’] = array(‘neq’,100 ...
- 带头结点的双向循环链表----------C语言
/***************************************************** Author:Simon_Kly Version:0.1 Date: 20170520 D ...
- PAT_A1067#Sort with Swap(0, i)
Source: PAT A1067 Sort with Swap(0, i) (25 分) Description: Given any permutation of the numbers {0, ...