vue对象类型赋值问题set get

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue对象类型赋值问题set get相关的知识,希望对你有一定的参考价值。

参考技术A 在vue中,如果你在初始data里定义一个对象,然后例如ajax后去赋值这个对象,直接用=的方法,是不生效的,那如何去实现呢 vue官方解决方法

vue里computed的get和set

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对象类型赋值问题set get的主要内容,如果未能解决你的问题,请参考以下文章

KVC set和get方法的赋值查找流程

如何将对象类型的值存储在数组中并调用它们(C#)?

DI,依赖注入,给对象赋值 ,get,set

对象——属性类型,get/set方法

vue $set 给数据赋值

Vue3 ref和reactive的使用和区别以及响应式原理