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 ...
随机推荐
- EntityFramework 知识点与sql优化汇总
一.EntityFramework modelBuilder.Entity<Domain.UseOilPlanDetail>().HasRequired(x => x.MainOil ...
- ASP.NET MVC 学习笔记之面向切面编程与过滤器
AOP(面向切面)是一种架构思想,用于把公共的逻辑放到一个单独的地方,这样就不用每个地方都写重复的代码了.比如程序中发生异常,不用每个地方都try…catch 只要在Golbal的Applicatio ...
- redis 发布订阅（pub/sub ）
- 【Muduo库】【base】基本类
一.Timestamp类 1.类图如下: 2. 知识点 (1) 这个类继承了 muduo::copyable, 以及 boost::less_than_comparable. (2) ...
- Largest Submatrix 3
Largest Submatrix 3 给出一个\(n\times m\)的网格图,第i行第j列上的格子有数字\(a[i][j]\),显然,你可以从中找到一个子矩阵,保证子矩阵中的数字互不相同,求子矩 ...
- php操作redis--字符串篇
前提:已经安装好了redis和相关拓展 常用函数:set/get/decr/incr等 应用场景:普遍的key/value存储类型 连接: $redis = new Redis(); $redis-& ...
- 【leetcode】667. Beautiful Arrangement II
题目如下: Given two integers n and k, you need to construct a list which contains ndifferent positive in ...
- 查看git HEAD
如果想看 HEAD 指向,可以通过 cat .git/HEAD 查看, 如果 HEAD 指向的是一个引用,还可以用 git symbolic-ref HEAD 查看它的指向.
- Java Number&Math类
Java Number类 一般地,当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double等. 实例 int i = 5000; float gpa = 13.65 ...
- $\mathcal{CSP-S}$，私は来ています
记事本 开个坑.背包dp我是真的一点也不会了... NOIP2014飞扬的小鸟 NOIP2018货币系统 11-4:$Countdown$ $to$ $the$ $tenth$ $day$ 上午 困的 ...