vue里computed的set和get方法

computed里的方法其实是默认使用了get方法
例如

computed: {
    editData () {
        return this.value
    }
}
// 相当于
computed: {
    editData: {
      get () {
        return this.value
      }
    }
}

如果对计算属性设置值,就会调用计算属性的set方法

computed: {
    editData: {
      get () {
        return this.value
      },
      set (v) {
        this.$emit(‘input‘, v)
      }
    }
 }
// 如果改变editData的值this.$set(this.editData, ‘fieldOptions‘, _editData)就会触发set方法里的this.$emit(‘input‘, v)

原文地址:https://www.cnblogs.com/zhujunislucky/p/12668451.html

时间: 2024-08-04 13:35:25

vue里computed的set和get方法的相关文章

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: <in

vue里的渲染以及computed的好处

如果vue里的某个methods函数执行,导致页面重新渲染,那么所有的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再次执行的方法定义到computed里,那么这些没有必要执行的方法就不会被渲染页面时候执行. 只有在computed函数所依赖的数据变化时候才会被执行 1 <div id="app"> 2 <div></div> 3 <p>{{num}}</p>

vue里的数据

背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件组件开发)既sfc. 本文主题 vue里数据的处理 存放数据 我们先看vue里哪里能存放数据: 1.单个vue文件里.2.官方插件vuex,作为一个集中管理经常复用的数据很有用.3.直接声明在vue实例上,用$号标识. 第一种情况下存放数据对于单个文件又分这几种属性1.1 data(常规使用,默认函

vue里面的v-for列表循环

列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. <li v-for="item in items">{{item.text}}</li> data:{ items:[ {text:"第一组"}, {text:"第二组"}, {text:"第三组"},

vue里面的get、post和jsonp

使用vue里面的get可以获取文件数据,当获取文件数据的使用的用法是 使用get获取php文件执行结果时就是在前面的案例的get方法中传入php文件,然后设置和php相对应的数据,如下 js代码 php代码 需要注意的是,php文件中,方括号里面的名称才是与js里面的名称一致,如图所示 post使用方法与get基本相似,就是在此基础上添加一个数据:emulateJSON: true 演示结果如下图所示 post方法的php代码 需要注意的是,粗看之下,连个php文件差异不大,但是php文件里面分

vue里store被意外修改

还是接着上次那个接手的项目,还是那里面的bug.还是在编辑信息的时候,用户信息是存在store里的,从个人中心页面点击编辑按钮到编辑页面,此时是正常的,但是如果在编辑页面修改了东西,没有保存,按道理来说下次进入编辑界面的时候是不应该保持上一次编辑的信息的.于是我翻看了代码里绑定数据的对象,果然,有一句代码引起了我的注意: 这句看似平常的一句代码,实际却“暗藏杀机”,打印了一下每次执行这句话之前infos的值,发现只要编辑了表单,store里infos的值也被改了,vue-store的官网上明确的

组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)

组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得.然好的控件永远敢不上应用的步伐,有时常规控件并不能满足应用的需要,经常需要在现有的控件上做扩展.有些应用需要在组合框的列表框的每一项前加复选框,以便可以控制列表框每一项的状态(选中还是未选中),显然现有的组合框(列表框+文本框的组合)不能满足应用要求.那么怎么得到一个超强组合框(列表框+文本框+复选

在不支持jffs2的DD-WRT里安装Wiwiz的3种方法

在不支持jffs2的DD-WRT里安装Wiwiz的3种方法Wiwiz HotSpot Builder Utility是一个用于创建无线热点的Web认证网关的软件.如果你有一个无线路由器并且能刷DD-WRT固件,就可以很方便地自建一个Web认证方式的Wifi热点.Wiwiz有几种不同的认证方式可以选择,其中有一个很有用的方式就是你可以创建一个计费的WiFi热点,而且可以让热点的用户在认证前通过支付宝或者Paypal在线付费,当用户付费之后,才能连接互联网.不过,并不是所有的DD-WRT版本都能使用

JavaScript里call,apply,bind方法简介

JavaScript里call,apply,bind方法不太容易理解,其实背后的思想并不算非常复杂,希望本文能帮你更好地了解这3个很像,而且看似很神秘的方法. 非要用一个关键字来点明它们的背后思想的精髓的话,关键字就是:this 因为通常程序员对C++比较熟,先借用C++,简单说一下this. 类的成员函数里,都可以用this来访问当前类的成员,但问题是成员函数的参数并没有this这个参数,比如: Animal a; a.eat(); a.eat("meat"); Animal的对象调