最近倒腾了一会vue,有点迷惑其中methodscomputed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~);

1. methods

methods类似react中组件的方法,不同的是vue采用的与html绑定事件。
给个例子

  /*html*/
<input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/
var app = new Vue({
el:'#app',
methods:{
handlClick:function(){
alert('succeed!');
},
}
})

通过在input标签中的vue命令 v-on命令绑定handlClick事件,而handlClick事件是写在methods属性里的


2. computed

/*html*/
<div id="app2">{{even}}</div>
/*js*/
var app2 = new Vue({
el:'#app2',
data:{
message:[1,2,3,4,5,6]
},
computed:{
even:function(){ //筛选偶数
return this.message.filter(function(item){
return item%2 === 0;
});
},
},
});

可以看到筛选出来了message中的偶数,现在在控制台打印出message看看


可以看到,message并没有变,还是原来的message,然后在控制台中修改message试试,

修改后我并没有人为的触发任何函数,左边的显示就变成了新的数组的偶数选集

3. 区别

methods是一种交互方法,通常是把用户的交互动作写在methods中;而computed是一种数据变化时mvc中的module 到 view 的数据转化映射。
简单点讲就是methods是需要去人为触发的,而computed是在检测到data数据变化时自动触发的,还有一点就是,性能消耗的区别,这个好解释。
首先,methods是方式,方法计算后垃圾回收机制就把变量回收,所以下次在要求解筛选偶数时它会再次的去求值。而computed会是依赖数据的,就像闭包一样,数据占用内存是不会被垃圾回收掉的,所以再次访问筛选偶数集,不会去再次计算而是返回上次计算的值,当data中的数据改变时才会重新计算。简而言之,methods是一次性计算没有缓存,computed是有缓存的计算。

4. TodoList例子

看了一下Vue官网的todo例子,好像没有筛选功能,所以就写了有个筛选功能的例子,
下面代码中,@click的意思是v-on='click'的简写,:class=的意思是v-bind:'class'=的简写

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<style>
.wrap{
width: 400px;
background-color: #ccc;
margin: 0 auto;
}
i{
color: #f00;
font-size: 12px;
margin-left: 20px;
cursor: pointer;
}
i:hover{
font-weight: 700;
}
ol{
/*white-space: nowrap;*/
word-wrap:break-word;
}
.done{
text-decoration: line-through;
}
.not{ }
</style>
</head>
<body>
<div class="wrap" id="todos">
<input type="text" v-model='nextItem' @keyup.enter='append'>
<button id="append" @click='append'>添加</button>
<ol>
<li v-for='(item,index) of comp'
:key=item.id
:class='item.state ? "not" : "done"'>
{{item.text}}
<i @click='remove(index)'>完成</i>
</li>
</ol>
<button @click='all'>全部</button>
<button @click='done'>已完成</button>
<button @click='todos'>待完成</button>
</div>
</body>
<script>
var todos = new Vue({
el:'#todos',
data:{
nextItem: '',
nextID: 1,
list: [],
type: null,
},
computed:{
comp:function(){
if( this.type === 0 ){
return this.list;
}
else if(this.type === 1){ //show all
return this.list.filter(function(item){
return true;
})
}
else if(this.type === 2){ //done
return this.list.filter(function(item){
return item.state ? false : true;
})
}
else if(this.type === 3){ //todos
return this.list.filter(function(item){
return item.state ? true : false;
})
}
}
},
methods:{
append:function(){//添加到todo
this.list.push({
id:this.nextID++,
text:this.nextItem,
state: true,
});
this.nextItem = '';
this.type = 0;
},
remove:function(index){ //添加到donelist
this.list[index].state = !this.list[index].state;
},
all:function(){
this.type = 1;
},
done:function(){
this.type = 2;
},
todos:function(){
this.type = 3;
}
}
});
</script>
</html>

Vue的computed(计算属性)使用实例之TodoList的更多相关文章

  1. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  2. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  3. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  4. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  5. vue的computed计算属性

    computed可定义一些函数,这些函数叫做[计算属性] 只要data里面的数据发生变化computed会同步改变 引用[计算属性]时不要加  () ,应当普通属性使用 例:console.log(t ...

  6. vue中computed计算属性与methods对象中的this指针

    this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...

  7. 小白学习vue第三天,从入门到精通(computed计算属性)

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

  8. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  9. Vue(七):computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

随机推荐

  1. linux-日常工作积累

    Linux常用命令之envsubst https://blog.csdn.net/banche163/article/details/101369495 Linux中的EAGAIN含义 https:/ ...

  2. LeetCode-005-最长回文子串

    最长回文子串 题目描述:给你一个字符串 s,找到 s 中最长的回文子串. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/pr ...

  3. 如何在 MWeb 中配置 Hexo 等静态网站

    原文链接 参考链接: https://zh.mweb.im/mweb-1.4-add-floder-octpress-support.html https://zhuanlan.zhihu.com/p ...

  4. LGP7847题解

    题意:给定 \(n\),求方程 \(\frac 1 a - \frac 1 b=\frac 1 n\) 的所有解,且解必须满足 \(\gcd(a,b,n)=1\). 以下内容搬运自官方题解: 转化一下 ...

  5. LGP5386题解

    写在前面的废话 自己写了两天,调了半天,然后jzp来帮忙调了一个小时,终于过了 过的时候耳机里放着桐姥爷的bgm,就差哭出来了 题解 首先这题没有部分分差评( 值域不变 我们可以注意到,如果一个区间全 ...

  6. Linux巡检检查项

    不定时更新...... 1)服务器 1.1 SELINUX检查(sestatus) 1.2 资源限制检查(ulimit -a) 1.3 最近登录(last) 1.4 操作系统版本(cat /etc/r ...

  7. 5月11日 python学习总结 子查询、pymysql模块增删改查、防止sql注入问题

    一.子查询 子查询:把一个查询语句用括号括起来,当做另外一条查询语句的条件去用,称为子查询 select emp.name from emp inner join dep on emp.dep_id ...

  8. RabbitMQ Go客户端教程6——RPC

    本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第六篇--RPC. 这些教程涵盖了使用RabbitMQ创建消息传递应用 ...

  9. python 发送GET请求

    # #博客地址:https://blog.csdn.net/qq_36374896 # 特点:把数据拼接到请求路径的后面传递给服务器 # # 优点:速度快 # # 缺点:承载的数据量小,不安全 imp ...

  10. Java多线程之线程同步【synchronized、Lock、volatitle】

    线程同步 线程同步:当有一个线程在对内存进行操作时,其他线程都不可以对这个内存地址进行操作,直到该线程完成操作, 其他线程才能对该内存地址进行操作,而其他线程又处于等待状态,实现线程同步的方法有很多. ...