计算属性的getter和setter

最新推荐文章于 2024-04-15 20:26:27 发布
最新推荐文章于 2024-04-15 20:26:27 发布
阅读量2.8k 收藏 1
点赞数 3
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVZCS/article/details/82313632
版权

先来看把计算属性写成函数的样式：

现在改成对象的样式，并且使用get和set

这两种方式显示的结果是一样的

这样子也能够改变页面上的值

但是当我想对fullName进行赋值的时候这是不行的

系统会说fullName没有setter函数

下面我使用set方法

页面上也会跟着变动，这是因为当你对fullName赋值时，传入的值被保存到value中，然后被以空格分割成一个数组，分别赋给firstName和lastName，当firstName和lastName发生改变时，又会触发计算属性重新计算，从而改变页面结果。

VVVGG
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js中getter和setter用法实例分析
10-18
在 Vue.js 中，计算属性默认只包含 `getter`，这意味着你可以根据其他数据属性的值来计算新的值，但不能直接修改计算属性。如果你需要在计算属性上设置值，你需要提供一个 `setter`。 总结一下，`getter` 和 `...
getterandsetter
03-29
3. **行为触发**：当属性被读取或设置时，`getter` 和 `setter` 可以触发某些额外的操作，如日志记录、计算、缓存更新等。 4. **性能优化**：在某些情况下，`getter` 和 `setter` 可能会被用来实现缓存机制，避免...
Vue的计算属性
qq_50260510的博客
06-07 4061
Vue的计算属性
Vue的Computed中的setter的使用
mapbar_front的博客
05-26 1万+
背景说明 vue中的计算属性，是根据数据data的变化，有自动更新属性的效果。 但是有时候，我们需要改变计算属性，也就是在计算属性的基础上，给它进行赋值，这个时候，我们就用到了setter。 计算属性的getter和setter。 通常情况下，一个计算属性，通常默认有getter。基本写法如下： computed: { choicedList: function () { ...
Vue的计算属性setter和getter_vue中 setter函数getter函数
最新发布
04-15 391
【代码】Vue的计算属性setter和getter_vue中 setter函数getter函数。
vue基础 - 12 （vuex：getters计算属性、actions异步方法、modules模块）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-04 511
1、getters：计算属性 1.1 书写： 函数名（state）{ return state.xxx… } store/index.js export default new Vuex.Store({ getters: { // 获取 num 的 双倍 double num_double(state) { // 函数必定带 state 参数, 代表共享的state return state.num * ...
13 Vue-计算属性getter
行走的皮卡丘
08-07 402
13 Vue-计算属性getter
类属性的setter/getter方法（函数）
m0_74331185的博客
11-14 283
类属性的setter/getter方法（函数）
Python @property及getter setter原理详解
09-17
在Python编程语言中，`@property`装饰器和getter、setter方法是面向对象设计中的重要概念，它们允许我们控制类的属性访问，提供了一种优雅的方式来封装数据。下面将详细解释这些概念及其工作原理。 首先，`@...
signs_getter_setter:签署常量和Getter-Setter ..
04-29
在JavaScript编程中，"signs_getter_setter"是一个常见的概念，它涉及到对象属性的访问控制和封装。标记常量通常是指将某些变量定义为不可更改的，而Getter-Setter则是一种面向对象编程中的特性，用于获取（get）或...
计算属性computed里面的getter和setter
热门推荐
前端技术的学习整理
06-28 1万+
参考一： 在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： &lt...
Vue--计算属性（getter/setter）
djz917的博客
06-14 4020
通常我们会在模板中绑定表达是，模板是用来描述视图结构的。如果模板中的表达式存在过多逻辑，模板就会变得臃肿不堪，难以维护。为了简单逻辑，当某个属性依赖于其他属性的值时，我们可以使用计算属性。什么是计算属性计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新。<div id="example"> <input type="text" v...
vue学习10： 计算属性的getter和setter
simoon's的博客
05-01 2646
直接上代码： <div id="app"> <span>{{fullName}}</span> </div> <script> var vm = new Vue({ el: '#app', data: { fi...
计算属性中setter属性的用法？
qq_46582421的博客
03-01 640
计算属性默认只有getter,不过在需要时也可以使用setter。默认情况下是使用getter读取的。 比如： 当您要收到去修改计算属性的值，向修改一个普通数据那样时，就会触发setter，执行一些自定义的操作。 比如： 当运行vm.fullName='杜甫‘时，setter会被调用，vm.firstName和vm.lastName也会相应地被更新。 ...
bug例子：计算属性没有setter.Computed property "xxxx" was assigned to but it has no setter.
weixin_41796631的博客
12-06 1万+
bug 提示：计算属性没有设置 setter  原因：计算属性中没有设置 setter  有bug 代码 new Vue({ el: '#demo', data:{ docState:"saved" }, computed: { buttonMessage:{ get:function (){ switch (this.docState) ...
vue 计算属性与vuex getters的传参
高先生的猫
06-06 1778
计算属性比method好的一点是计算属性依赖数据是否变化而执行，不是每一次都执行，效率比较高，为了复用代码可以给计算属性进行传参 使用计算属性返回一个函数来实现 <el-button v-if="getpermBTN('add')">test</el-button> computed:{ getpermBTN(){ return btn=>{ console.log("hi") return
07vue_计算属性_setter和getter
jiang7701037的博客
02-22 684
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app1"&g
【vue】vue常用特性——计算属性
zhhvera的博客
06-18 468
计算属性 1.为何需要计算属性 表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁 例如，想要实现一个字符串的反转功能 <div>{{msg}}</div> <script> var vm= new Vue({ el:"#app", data:{},//data中需要添加msg键值对 computed:{ reverseString:function(){ return this.msg.split(“”).reverse().join("")//需要在
vue 计算属性_vue 计算属性的用法以及 setter 功能【04】
weixin_39791225的博客
12-12 456
学习要点：1.计算属性 2.setter本节课我们来开始学习 Vue 的计算属性的用法以及 setter 功能。一．计算属性1. 对于插值可以进行简单运算，可一旦过于复杂，则模版维护将变得异常困难；<div id="app">{{start}} {{message}} {{end}}div>const dataObj={start:'[',message:'...
计算属性getter和setter
08-10
计算属性的getter和setter是计算属性的两个方法。getter用于获取计算属性的值，setter用于设置计算属性的值。当获取计算属性时，实际上是在调用计算属性的getter方法，而当设置计算属性的值时，实际上是在调用计算...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值