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. jquery-网站收藏

    jquery跑马灯:http://www.dowebok.com/demo/188/index3.html

  2. js object template

    //== Class Definition var Test = function() { var login = $('#m_login'); //== Private Functions var ...

  3. npm run dev

     npm run dev     npm run build

  4. System.IO.File.WriteAllText("log.txt", "dddd");

    System.IO.File.WriteAllText("log.txt", "dddd");

  5. There is a chart instance already initialized on the dom!警告

    使用Echarts插件的时候,多次加载会出现There is a chart instance already initialized on the dom.这个错误,改插件已经加载完成. 并且如果你 ...

  6. Windows利用文件夹映射来同步文件

    在windows服务器上有时有这样的需求: 你的文件在f:\test中,但由于其它原因用户访问的是e:\test,如果又希望e:\test 中的文件与f:\test的保持同步,除了用同步软件来做外,可 ...

  7. Java基础(四)线程快速了解

    开始整理线程之前,之前有个命令忘记整理了,先整理一下jar命令的使用 Jar包 其实可以理解是java的压缩包方便使用,只要在classpath设置jar路径即可数据库驱动,ssh框架等都是以jar包 ...

  8. Linux系统查毒软件ClamAV (online)

    ClamAV是一个可用于Linux平台上的开源杀毒引擎,可检测木马.病毒.恶意软件和其他恶意的威胁. 官网:http://www.clamav.net/ 一.CentOS环境安装 # yum inst ...

  9. 力导向图Demo

    <html> <head> <meta charset="utf-8"> <title>力导向图</title> < ...

  10. Java编程的逻辑 (90) - 正则表达式 (下 - 剖析常见表达式)

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...