vue2 computed set与get函数

大家都知道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里面的值,作为自己的值。

欢迎大家指正。

时间: 2024-08-22 22:15:55

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

Vue2.x中的Render函数

Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElement是render的核心方法.其Vue编译的时候会把template里面的节点解析成虚拟dom: 什么是虚拟dom? 虚拟dom不同于真正的dom,它是一个JavaScript对象.当状态发生变化的时候虚拟dom会进行一个diff判断/运算:然后判断哪些dom是需要被替换的而不是全部重绘,所以性能

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

书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed observables,我称它为计算observable(说实话关于observable怎么翻译我还真拿不准). 要是你在视图对象中已经定义了一个叫firstName的observable属性和一个叫lastName的observable属性,而你想显示这个人的全名那要如何处理呢?这种情况下就到了co

函数的组成部分及函数参数

一.函数 1.概念 重复利用的工具 完成特定功能的代码块,函数就是存放代码块的容器 2.定义函数的语法 def   函数名(参数1 ,参数2,参数3,......) 函数体 return 注:函数返回值也称之为函数值,就是函数执行的结果 可以用变量接收/可以直接打印/可以直接使用 3.函数的四大组成部分 函数名:使用函数的依据 函数体:完成功能的具体代码块 函数返回值:功能完成返回的信息 参数:实现功能需要的参数 4.使用函数 函数名() 注:先定义后使用 二.函数的分类 1.从函数体进行分类

4.vuex学习之getters、mapGetters

gettters可以理解为计算属性 在store.js中 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //访问状态对象 const state = { count:1 } const getters = { //vue2.0不要使用箭头函数,getters主要任务就是对状态state对象里面的数据,执行计算后输出 count:function(state){ return state.count+=100 } } exp

谈谈vue.js中methods watch和compute的区别和联系

methods,watch和computed都是以函数为基础的,但各自却都不同: 1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动. 2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行.  而不像watch和computed那样,“自动执行”预先定义的函数 [总结]:method

用KnockoutJS实现ToDoMVC代码分析

体验地址 Knockout 版todo web app在线体验 http://todomvc.com/examples/knockoutjs/ 源码地址 项目源码地址,此地址包含了各种JS框架实现的todo web app https://github.com/tastejs/todomvc HTML View 以下是html view中主要部分 <section id="todoapp"> <header id="header"> <

vuejs能否监控localStorage的变化?

https://segmentfault.com/q/1010000006806036 1.问题 用vue.js过程中了解到计算属性,它类似于定义了一个函数f,f的返回值依赖于某些变量a,b,c.当a,b,c中任意一个发生变化,就调用f得到新的返回值. 我现在用token做登录身份验证,使用到localStorage,在computed中编写"函数",根据localStorage的值,在导航栏显示不同的链接:已经登录的显示"用户名"和"退出",未

深入浅出KnockoutJS

深入浅出KnockoutJS 写在前面,本文资料大多来源网上,属于自己的学习笔记整理. 其中主要内容来自learn.knockoutjs.com,源码解析部分资料来自司徒正美博文<knockout.js学习笔记>系列. 1. Knockout初体验 1.1 Before Knockout 假设我们的页面输入区域有一个div用来展示一件物品的名字,同时有一个输入框用来编辑这件物品的名字 <div id=”itemName”></div> <input type=”t

框架是如何炼成的 —— 揭秘前端顶级框架的底层实现原理

译者注:本文原文 Revealing the Magic of JavaScript ,原标题“揭秘JavaScript魔法”,本文深入浅出,揭示了几个前沿框架如jQuery.angularJs.EmberJs和React的几个核心功能点的实现技巧,无论是对前端菜鸟还是老鸟,相信都会有一定的启迪.鄙人精力和能力有限,如有错误或生涩之处,还请指出和多多包涵. 我们每天都使用大量的前端库和框架,这些各种各样的库和框架已经成为我们日常工作的一部分,我们之所以使用他们,是因为我们不想重新造轮子,即使我们