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 ...
随机推荐
- 【牛客网-剑指offer】旋转数组的最小数字
题目: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...
- LeetCode Array Medium 11. Container With Most Water
Description Given n non-negative integers a1, a2, ..., an , where each represents a point at coordin ...
- PAT 乙级练习题1001 害死人不偿命的(3n+1)猜想 (15)
1001. 害死人不偿命的(3n+1)猜想 (15) 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去, ...
- postgresql like 中的转义
select * from tb_org where char_length(xdm)>8 and xdm not like '%*_%' ESCAPE '*' ESCAPE 后面的 * 是转 ...
- word2vec 原理浅析 及高效训练方法
1. https://www.cnblogs.com/cymx66688/p/11185824.html (word2vec中的CBOW 和skip-gram 模型 浅析) 2. https://ww ...
- sqldeveloper全部导出
点击Tools--Export User Objects 这种方式可以导出当前用户拥有的所有对象,包括表.视图.触发器.同义词等等,对于表,只能导出表结构(建表语句),不能导出数据, 选中要导出的对象 ...
- 【JDK1.8】Java 栈实现方式
看到一道面试题,问Java中栈的实现方式,记录下一些实现细节. API中有5个方法,分别是: boolean empty() E peek() E pop() E push() int search( ...
- JavaScript常用技巧之字符串操作
1.首字母大写 str.replace(/\b\w+/g, function (word) { return word.substring(0, 1).toLowerCase() + word.sub ...
- 质数密度+思维——cf1174D
/* 构造 n个点的无向图,无重边自环 边数e也是质数 点的度数也是质数 */ #include<bits/stdc++.h> #include<vector> using n ...
- I - Nice to Meet You
传送门 和10-17 B 君的第三题 类似,应该算是简化版,给出了固定的点. f[s]表示只考虑连端都在s集合中的边,s中的固定点(1或者2)能到达整个集合的方案数. 预处理c[s]表示s集合中的总边 ...