vue计算属性computed和methods的区别
computed和methods的区别
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。
computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed;
简单示例:
要求:
<input type="text v-model="num1">
<input type="text v-model="num2">
现在要返回num1和num2的和;
<script>
new Vue({
el:"#box",
data:{
num1:0,
num2:0
}
computed:{
result:function(){
return this.num1 + this.num2
// 计算属性必须有一个返回值
}
}
})
</script> methods:是方法的意思,在js中,我们把一些函数叫做方法,一般情况下,要触发这个方法就要执行,要执行就要有一个源来触发,所以就需要一个事件源。这是和computed的一点不同之处;
methods的示例: 要求:
<\button @click="btn()">点击弹出vue<\/button>
<script>
new Vue({
el:"#box",
data:{
num1:0,
num2:0
}
methods:{
btn:function(){
alert('vue');
//这里根据情况,可以返回有返回值也可以没有返回值。
}
}
})
</script> 对比computed 和 methods:
computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件,就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值,而methods中可以只执行逻辑代码,可以有返回值,也可以没有。
vue计算属性computed和methods的区别的更多相关文章
- Vue.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- 计算属性computed 与methods
你可能已经注意到我们可以通过调用表达式中的 method 来达到同样的效果: <p>Reversed message: "{{ reversedMessage() }}" ...
- Vue计算属性computed的全面解析
前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...
- 在做vue计算属性,v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
随机推荐
- 任务37:生成 JWT Token
实现给用户办法token 默认是可以访问valuesController的,返回的状态是200 http://localhost:5429/api/values 返回的状态码是200 把ValuesC ...
- NYOJ1——A+B Problem NYOJ2——括号配对问题
A+B Problem 时间限制:3000 ms | 内存限制:65535 KB 难度:0 描述:此题为练手用题,请大家计算一下a+b的值 输入:输入两个数,a,b 输出:输出a+b的值 样 ...
- Docker容器日志管理最佳实践
目录 一 .Docker 引擎日志 二.容器日志 2.1.常用查看日志命令--docker logs 2.2 .Docker 日志 驱动 三. 生产环境中该如何储存容器中的日志 一.当是完全是标准输出 ...
- poj1015【DP.......无奈了】
首先,读题,真是一窍不通.后来看完程序的意思,才明白吧.. 题意: n个人中选m个,条件是取sum|D-P|最小,当有|D-P|相同的时候取|D+P|最大的.然后输出那些m个人的sumD,sumP,最 ...
- 洛谷P4725 【模板】多项式对数函数(多项式运算)
传送门 前置芝士:微积分(有所了解即可)(可以看看这篇,写得非常详细我看了两章就看不下去了) 以下都是一些简单的教程切莫当真,仅供理解,建议看更严谨的 导数:对于一个函数$f(x)$,它的导数$f'( ...
- [Swift]有用的Binary Heap Type类
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Nginx(四) nginx+consul+upasync 在ubnutu18带桌面系统 实现动态负载均衡
1.1 什么是动态负载均衡 传统的负载均衡,如果Upstream参数发生变化,每次都需要重新加载nginx.conf文件,因此扩展性不是很高,所以我们可以采用动态负载均衡,实现Upstream可配置化 ...
- 题解报告:poj 1113 Wall(凸包)
Description Once upon a time there was a greedy King who ordered his chief Architect to build a wall ...
- python programming
1. super 2. *args, **kwargs 3. class object 4. type 5. isinstance 6. list[:] = another_list
- NTP服务简介
定义:NTP全称为Network Time Protocol,即网络时间协议.是用来使计算机时间同步的一种协议.它可以使计算机对服务器或时钟源做同步,可以提供高精度的时间校正(LAN 上与标准时间小于 ...