computed里的对象有get和set方法。

get是当该对象所依赖的变量发生变化是执行,重新returncomputed结果。

set是该对象的值变化时会执行,并且将变化的结果作为参数传进set里。然后可以根据传进的值来处理

    <div id="app">
<p>price: <input type="text" v-model='price'>{{price}}</p>
<p>mount: <input type="text" v-model='mount'></p>
<p>toltal: {{calculate}} </p>
<button v-on:click='change'>changePrice</button>//当改变了calculate的值得时候,会执行calculate的set方法,且传入参数 </div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
price: 0,
mount: 0, },
methods:{
change:function(){
this.calculate = 100;
} },
computed:{
calculate:{//这个calculate不能是函数而是对象了。
get: function(){
alert('get执行了')//页面渲染时会执行一次get来获取calculate的值
return this.price * this.mount
},
set:function(value){
alert('set执行了');
this.price = 10;
this.mount = 10
}
}
}
})

vue里computed的get和set的更多相关文章

  1. vue里的渲染以及computed的好处

    如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...

  2. vue里的数据

    背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...

  3. vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  4. Vue中computed与method的区别

    转载于:https://segmentfault.com/a/1190000014478664?utm_source=tag-newest 1.computed区别于method的两个核心 在官方文档 ...

  5. 深入解析Vue里函数的调用顺序介绍

    今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. method用来定义方法的,比如你@click=& ...

  6. 了解vue里的Runtime Only和Runtime+Compiler

    转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...

  7. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  8. vue的computed属性

    vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号 <div> <input type="text" v-model=&q ...

  9. Vue的Computed的使用

    Vue的Computed的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. pip安装pycrypto报错:Microsoft Visual C++ 14.0 is required. 和 SSLError: HTTPSConnectionPool的解决办法

    今天本打算把[Python3爬虫]网易云音乐爬虫 的代码敲一遍, 但是在安装pycrypto老是报错, 由于我计算是win10, 并且也有vs2017 python3环境下安装pycrypto的一些问 ...

  2. Dubbo接口压测

    在每年的双十一大促之前,除了全链路压测,还需要各个业务方对自己业务提供的核心接口进行单接口压测,以评判系统的稳定性和承压能力. 一.准备工作 环境准备:确保应用性能环境(perf)正常可用 压测接口梳 ...

  3. grid - 通过网格区域命名和定位网格项目

    1.像网格线名称一样,网格区域的名称也可以使用grid-template-areas属性来命名.引用网格区域名称也可以设置网格项目位置. 设置网格区域的名称应该放置在单引号或双引号内,每个名称由一个空 ...

  4. 【转】最近很火的 Safe Area 到底是什么

    iOS 7 之后苹果给 UIViewController 引入了 topLayoutGuide 和 bottomLayoutGuide 两个属性来描述不希望被透明的状态栏或者导航栏遮挡的最高位置(st ...

  5. 基于 Python 官方 GitHub 构建 Python 文档

    最近在学 Python,所以总是在看 Python 的官方文档, https://docs.python.org/2/ 因为祖传基因的影响,我总是喜欢把这些文档保存到本地,不过 Python 的文档实 ...

  6. Kettle实现数据抽取、转换、装入和加载数据-数据转移ETL工具

    原文地址:http://www.xue51.com/soft/5341.html Kettle是来自国外的一款开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需 ...

  7. python sphinx 文档自动生成方法

    ## sphinx 生成开发文档#### 配置 1. 运行如下命令,即可生成 conf.py index.rst Makefile 三个文件: `sphinx-quickstart` 2. conf. ...

  8. CentOS 7 yum nginx MySQL PHP7 简易环境搭建(精)

    用centos自带的yum源来安装nginx,mysql和php,超级方便,省去编译的麻烦,省去自己配置的麻烦,还能节省非常多的时间. 我们先把yum源换成国内的阿里云镜像源(当然不换也可以),先备份 ...

  9. .NET HttpPost 上传文件图片到服务器

    public class ImageData { public string imageFilePath { get; set; } public string tempFilePath { get; ...

  10. (10) 如何MySQL读压力大的问题

    如何进行读写分离 由开发人员根据所执行的SQL类型连接不同的服务器 由数据库中间层实现读写分离 读写分离时,需要注意,对于实时性要求比较高的数据,不适合在从库上查询(因为主从复制存在一定延迟(毫秒级) ...