来自 Web前端 2020-03-24 06:26 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

vue中计算属性的get与set方法网上澳门金莎娱乐

时间: 2019-11-05阅读: 101标签: 属性

时间: 2019-11-05阅读: 121标签: 属性1.含义及用法

在vue的计算属性中,所定义的都是属性,可以直接调用

(1)在html模版中绑定数据时,如果需要的数据不是一个简单的数据,而是需要将一个或者多个数据计算之后得到的数据,这时候就需要用到计算属性(2)使用方法:配置computed属性,它的值为对象,对象里面的键值对就是一个个计算属性,key就是计算属性的名称,值是一个函数,这个函数的返回值就是计算属性的值

正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法

var vm = new Vue({ el: '#app', data: { message: 'good!' }, computed: { reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})

div  p原始字符串: {{ message }}/p p反转字符串: {{ reversedMessage }}/p/div
computed:{ fullNname:{ set:function(newValue){ console.log(newValue) } get:function(){ console.log(this.name) } }}

渲染结果:

而绝大多数情况下,计算属性没有set方法,是一个只读属性

div  p原始字符串: good!/p p反转字符串: !doog/p/div

此时计算属性可以简写

  1. computed vs methods
computed:{ fullName:function(){ console.log(this.name) }}

(1)计算属性一般作为一个数据绑定在html模版中,而methods一般用于事件监听时调用,虽然methods也能达到计算属性一样的效果,但是语义还是有区别的(2)computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

3.计算属性的get/set方法

网上澳门金莎娱乐,(1)通常情况下计算属性的值默认是一个函数,即get方法。顾名思义,就是获取一个数据,而这个数据是根据所依赖的数据经过一番计算得到的。(2)其实它还有一个方法,即set方法,通过给这个属性赋值来触发相关的回到函数执行,并在回调函数中操作其他的数据

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:vue中计算属性的get与set方法网上澳门金莎娱乐

关键词: