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 ...
- 洛谷 - P1034 - 矩形覆盖 - dfs
https://www.luogu.org/problemnew/show/P1034 可能是数据太水了瞎搞都可以过. 判断两个平行于坐标轴的矩形相交(含顶点与边相交)的代码一并附上. 记得这里的xy ...
- css width
转载:http://blog.csdn.net/dddddz/article/details/8631655
- Spring 2.5
Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller.在目前的 Spring ...
- python_13(前端—cs)
第1章 前端三大标准:1.1 三大标准介绍 1.2 html标签一览表 第2章 结构标准 html 2.1 html结构 2.2 html常用标签 2.2.1 h1-h6 2.2.2 span 2.2 ...
- saltstack学习笔记--grains基本操作
查看当前已经定义的监控项: [root@master ~]# salt "192.168.75.135" grains.items 192.168.75.135: ---- ...
- AJPFX简述JavaStringBuffer方法
以下是StringBuffer类支持的主要方法: 序号 方法描述 1 public StringBuffer append(String s)将指定的字符串追加到此字符序列. 2 public Str ...
- Map集合的实现类
Map的继承关系: Map接口的常用实现类: 1.HashMap.Hashtable(t是小写) HashMap不是线程安全的,key.value的值都可以是null. Hashtable是线程安全的 ...
- GeoTools坐标转换(投影转换和仿射变换)
GeoTools是在java下的gis开源软件,以下介绍坐标转换的两种方法:投影转换和仿射变换 投影转换 这里以xian80经纬度坐标转xian80,3度分带 111中央经线平面坐标为例 转换函数如下 ...
- Mac Outlook 15 连接office365 一直跳出登录框的问题
解决: 比如 原登录用户名密码为 abc@xxx.com 密码:***** 改一下outlook帐号中的登录用户名为:xxx.com\abc 密码为原来密码,尝试连接,连接状态会连上,但过会儿又提 ...