首页 > 其他 > 详细

vue里computed的get和set

时间:2018-12-22 21:26:43      阅读:799      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/dangdanghepingping/p/10162404.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!