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的主要内容,如果未能解决你的问题,请参考以下文章