大家都知道computed简单的使用方法,这儿只分享一下setter和getter用法:

setter:设置值时触发。

getter:获取值时触发,与setter是没有必然联系的。

<template >
  <div>
    <button @click='fn'>设置</button> //点击后fn函数执行。
    <button @click='fn1'>获取</button> //点击fn1函数执行。
  </div>
</template>   
<script>
  export default {
    methods:{
      fn(){
      this.msg1=5  //msg1设置值
      },
      fn1(){     
        console.log(this.msg1)//msg1获取值  上面虽然设置了5,但是这儿是返回6,get函数返回值是6,跟set是没有必然关系的。
      }
    },
    computed:{
      msg1:{
        set(){  
          console.log('我被设置了')   //msg1设置值时此处触发 
        },
        get(){
          console.log('我被调用了') //msg1获取值时触发
          return 6         //这儿返回值将是msg1的值。
        }
      }
    }
  }
</script>
computed一般用法是改变data里面的值,作为自己的值。
欢迎大家指正。

vue2 computed set与get函数的更多相关文章

  1. Vue2.x中的Render函数

    Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...

  2. MobX中@computed和自定义get函数的区别

    首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...

  3. vue2源码分析:patch函数

    目录 1.patch函数的脉络 2.类vnode的设计 3.createPatch函数中的辅助函数和patch函数 4.源码运行展示(DEMO) 一.patch函数的脉络 首先梳理一下patch函数的 ...

  4. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  5. Vue2源码分析-逻辑梳理

    很久之前就看完vue1,但是太懒就一直没写博客,这次打算抽下懒筋先把自己看过了记录下来,否则等全部看完,估计又没下文了 看源码总需要抱着一个目的,否则就很难坚持下去,我并没做过vue的项目,我几乎很少 ...

  6. Vue2学习(1)

    学习Vue2的computed 属性和 watcher 主要将computed 和methods和watcher作比较,对其各自的相关优缺点作了介绍. computed 属性会基于它所依赖的数据进行缓 ...

  7. vue3与vue2的区别

    全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...

  8. Knockoutjs官网翻译系列(三) 使用Computed Observables

    书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...

  9. vue computed 原理

    vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...

随机推荐

  1. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  2. Linux压力测试软件Stress安装及使用指南

      一.Stress是什么 stress是一个linux下的压力测试工具,专门为那些想要测试自己的系统,完全高负荷和监督这些设备运行的用户. 二.安装 将stress的安装包上传并解压到linux服务 ...

  3. sendGrid 纯文本的换行问题

    项目中使用sendGrid发送邮件,并且要求纯文本格式,遇到了无法换行的问题(使用\r\n). 解决方案: 1. 在换行符前加空格(官方推荐的做法 https://sendgrid.com/docs/ ...

  4. Unity3D中通过Animator动画状态机获取任意animation clip的准确播放持续时长

    Unity3d 4及之前的版本中动画的播放用的animation,可直接获取其播放持续长度.但5.x及以后的版本中都是用animator来播放动画了. https://docs.unity3d.com ...

  5. python爬虫(七)_urllib2:urlerror和httperror

    urllib2的异常错误处理 在我们用urlopen或opener.open方法发出一个请求时,如果urlopen或opener.open不能处理这个response,就产生错误. 这里主要说的是UR ...

  6. 微软Azure云计算服务主导全球

    10月20日,微软首席运行官(CEO)纳德拉(Satya Nadella)在美国旧金山对外宣布:将在澳大利亚建设数据中心.同一时候与大型IT企业美国戴尔和分散式处理系统服务商美国Cloudera等展开 ...

  7. 通过c# 实现mysql 数据库的备份和附加

    近期涉及到通过c# 对mysq数据库的备份和附件功能 由于mysql 有类似的备份和附加的cmd命令.可是一直没用过,今天实践了下,感觉效率挺快.比自己写的效率高.以下我列出c#调用mysql的备份和 ...

  8. C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

    在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基 ...

  9. 机器学习笔记2 – sklearn之iris数据集

    前言 本篇我会使用scikit-learn这个开源机器学习库来对iris数据集进行分类练习. 我将分别使用两种不同的scikit-learn内置算法--Decision Tree(决策树)和kNN(邻 ...

  10. Django的Models(三)

    ORM操作的一些进阶的方法: ################################################################## # PUBLIC METHODS T ...