详解Vue的computed(计算属性)使用实例之TodoList


Posted in Javascript onAugust 07, 2017

最近倒腾了一会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看看

详解Vue的computed(计算属性)使用实例之TodoList

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

详解Vue的computed(计算属性)使用实例之TodoList

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

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
详解express与koa中间件模式对比
Aug 07 #Javascript
JS实现简单短信验证码界面
Aug 07 #Javascript
ReactNative Image组件使用详解
Aug 07 #Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 #Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 #Javascript
JS判断微信扫码的方法
Aug 07 #Javascript
AngularJs每天学习之总体介绍
Aug 07 #Javascript
You might like
php查看网页源代码的方法
2015/03/13 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Scrapy的简单使用教程
2017/10/24 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
python实现简单的学生管理系统
2021/02/22 Python
电子商务个人自荐信
2013/12/12 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
四年大学自我鉴定
2014/02/17 职场文书
升学宴演讲稿
2014/09/01 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
作文评语怎么写
2014/12/25 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
vue里使用create, mounted调用方法
2022/04/26 Vue.js