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 ...
随机推荐
- vue组件库的基本开发步骤（源代码）
上次发布的随笔忘记提供源代码了,今天特地来补充,如果有什么问题,欢迎大家为我修改指正. vue.config.js文件: const path = require('path') function r ...
- navigator对象-了解
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent ,该属性可以返回由客户机发送服务器的 user-agent 头部的值 下面前段代码可以判断用户使用哪个终 ...
- Linux中目录结构以及VI编辑器常见的命令操作
1.每个目录的详细介绍,先放一张目录的整体结构在这里 /bin:是Binary的缩写,用于存放经常使用的命令 /sbin:s代表Super User,用于存放系统管理员使用的命令 /home:存放普通 ...
- yum 命令跳过特定(指定)软件包升级方法
今天在更新rhel的时候,遇到了yum update 更新失败,一些包的依赖关系有问题,报出了需要rpm_check_debug的信息. 我man 一下rpm的命令没有看到check相关的选项,也就没 ...
- C# JavaScriptSerializer 自定义序列化
虽然,我个人建议使用Json.Net. 但大家需求不同.遇到一个朋友,他有个需求JavaScriptSerializer并且序列化时,隐藏基类成员. 这里我采用自定义序列化来实现: public st ...
- phpStudy的安装和配置
一,下载工具 官网:http://www.phpstudy.net/,选择自己要安装的版本 二.多个站点和域名配置 1.打开phpStudy=>点击“其它选项菜单”=>点击“站点域名管理” ...
- input select 值得绑定与获取
<div style="margin-top:100px"> <!--Input 值得绑定--> <div id="app20"& ...
- java在acm中常用基础技巧方法
java在acm中常用基础技巧方法 如果学到了新的技巧,本博客会更新~ input input-std @Frosero import java.util.*; public class Main { ...
- react 教程—核心概念
react 核心概念 : https://react.docschina.org/docs/getting-started.html(官网) 或 https://www.w3cschool.cn/ ...
- 剑指offer——二进制中1的个数（c++)
题目描述实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如,把9表示成二进制是1001,则输出为2 常规解法首先把n和1做位运算,判断n的最低位是不是1,然后把1左移一位得到2,再把n和2 ...