Vue 计算属性 get 和set

最新推荐文章于 2023-04-27 13:26:44 发布
最新推荐文章于 2023-04-27 13:26:44 发布
阅读量452 收藏
点赞数
分类专栏： 前端 文章标签： computed get set
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37767455/article/details/102384210
版权 
<body>
    <div id='app'>
        {{fullName}}
   
    </div>

    <script>      
        var vm = new Vue({
            el:"#app",
            data:{
                firstName:"自嘲",
                lastName:"tony"
               
            },

            //1.计算属性   性能更高 
            //缓存机制：当计算属性依赖的这两个属性不发生变化，那他也就不重新计算了
            computed: {
                
                fullName: {
                    get: function(){
                        console.log("compute fullName method executes once ")
                        return this.firstName+" "+this.lastName
                    },
                    
                    set: function(value){
                        console.log('set方法里面打印：'+value)
                    }
                      
                }
            }
 
        })
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

2.演示set

<body>
    <div id='app'>
        {{fullName}}
   
    </div>

    <script>      
        var vm = new Vue({
            el:"#app",
            data:{
                firstName:"old_boy",
                lastName:"tony"
               
            },

            //1.计算属性   性能更高 
            //缓存机制：当计算属性依赖的这两个值不发生变化，那他也就不重新计算了
            computed: {
                
                fullName: {
                    get: function(){
                        console.log("compute fullName method executes once ")
                        return this.firstName+" "+this.lastName
                    },
                    
                    set: function(value){
                        var arr = value.splite(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                      
                }
            }
 
        })
    </script>
</body>

在这里插入图片描述
下面改变一下值试试 ：
在这里插入图片描述

Take^that
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的计算属性和样式绑定
qq_45962090的博客
10-30 979
目录一、计算属性1.1 概述及作用1.2 为何需要用到计算属性？1.3 computed与methods的区别1.4 computed setter二、样式绑定2.1 class 属性绑定2.1.1 绑定单个class2.1.2 绑定多个class2.1.3 绑定class对象2.1.4 绑定class数组2.2 绑定内联样式(style)2.2.1 直接设置样式2.2.2 绑定样式对象2.2.3 绑定多个样式对象 一、计算属性 1.1 概述及作用 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的
Vue 的计算属性(computed)
weixin_52915467的博客
12-06 252
今天有事努力的一天！！！ 如果事与愿违，那一定另有安排。积极生活，让我们的每一天都充满热情。 上知识！ 在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性 比如说我们在下面举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
vue计算属性get和set用法示例
10-17
主要介绍了vue计算属性get和set用法,结合实例形式分析了计算属性的功能及get和set用法的具体使用技巧,需要的朋友可以参考下
vue中computed之set和get
放弃不难，但坚持一定很酷！
04-27 3743
b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存 计算的结果，不会多次执行。计算属性中包含了set(获取计算属性)和get(设置计算属性)两个方法(回调函数)get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值。a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化。set回调函数: 监视当前属性值发生改变时调用,更新相关的属性值。a.数据可以进行逻辑处理操作。b.对计算属性中的数据进行监视。
vue2计算属性内的get/set解析
weixin_41993525的博客
04-13 1290
在计算属性内，get/set字面意思是获取和设置操作，计算属性值根据依赖变量的值在get内return，set则是值改变时需要执行的区域。常规的computed写法，如果b变量在某个地方被更改的话，会报错。
C#关于set()和get()方法的理解及使用
热门推荐
weixin_41883890的博客
08-04 1万+
GET SET 就是对外的接口 ，一般在实例中访问成员数据需要这个成员数据的访问方式为PUBLIC ，现在C#很高级了，GET 就是获取，SET 就是设置，但是它提供了跟好的收缩性，对GET 和SET 可以单独设置访问权限 比如你对某个成员数据只能读取或者只写，或者只有派生类可以访问等。相对以前来说，没有属性访问器，需要通过函数来调用私有成员数据，属性提供了高效的访问模式和简单的书写。上述代码中如果去掉set部分，则外界只能读取name的值，如果去掉get部分，则只能给name赋值。...
computed计算属性的两个方法get()、set()
weixin_57660141的博客
11-30 2111
计算属性的get和set方法，遇到的bug
vue计算属性及使用详解
08-27
下面是关于 Vue 计算属性的详细解释和使用方法。 什么是计算属性 计算属性是指在模板中使用的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如，以下是...
Vue computed 计算属性代码实例
10-15
Vue.js 是一款流行的前端框架，用于构建用户...总之，Vue 的计算属性提供了一种优雅的方式来处理数据的派生和计算，确保了代码的简洁和高效。在实际项目中，合理地使用计算属性可以提升用户体验，同时降低代码复杂度。
vue计算属性computed的使用方法示例
10-17
计算属性的定义有两种方式：一种是简化的函数形式，另一种是带有`get`和`set`方法的对象形式。 1. 函数形式： ```javascript computed: { b() { return this.a + 2; } } ``` 在这个例子中，`b`是基于`a`的计算...
Vue.js 计算属性的基本使用，复杂使用 ，set 和 get，计算属性与methods的对比 和 计算属性与侦听器
qq_52499703的博客
07-27 2087
Vue.js 计算属性的基本使用，复杂使用 ，set 和 get，计算属性与methods的对比 和 计算属性与侦听器
vue中计算属性之set和get
tdmbs的博客
04-10 3308
computed计算属性中包含了set和get两个方法（回调函数） get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值 set回调函数:监视当前属性值发生改变时调用,更新相关的属性值 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，否则就是多次调用，但只会计算第一次，其他次调用的计算结果采用缓存的结果。注意，如果某个依赖 (比如非响应式属性) 在该实例...
【白二白】C#：属性——get和set的区别与用法简述
白二白的小窝
11-17 1072
属性：保护字段，对字段的取值进行限定 属性本质为两个方法：set（写）和get（读） 通常情况下，字段是私有的private 写在get里是对属性加限制，若使用属性，那就在这里加限制 写在set里是对字段加限制，若使用字段，就在这里加限制 通常使用get即可，就本人目前学习来看，二者在使用上并无太差差异。。。如代码所示 ...
vue中计算属性computed中get跟set的区别
weixin_44795287的博客
02-18 618
计算属性computed 默认只有getter这个属性，需要用setter再进行设置 computed: { fullName: { // getter 只要值变化就会重新触发这个get返回新的值 get: function () { return this.firstName + ' ' + this.lastName }, // setter这个属性是在监听数据变化时进行其他数据计算的属性 set: function (newValue) {
Vue计算属性的get和set
Mr_xiaoxuboke的博客
05-23 328
get和我们普通在方法中调用的方法一致，都是得到的意思 set是当fullName被修改时会被调用 代码如下： <div id="app"> <h2>{{firstName}}-{{lastName}}</h2> <h2>{{fullName}}</h2> </div> <script src="./vue.js"></script> <scri
Vue04/计算属性完整写法 get() set( )、Vue侦听器 watch
m0_64494670的博客
10-30 1506
Vue04/计算属性完整写法 get() set( )、Vue侦听器 watch
vue计算属性的get和set
weixin_45075981的博客
10-06 3633
<template> <div> <div>性别是：{{getsex}}</div> <button @click="addarr">添加</button> <div>改变name的值 {{getname}}</div> </div> </template> <script> expo.
Vue之 get和set
smalCat的博客
04-15 7102
在之前的面试中遇到面试官让我讲解一下vue的get和set的原理，当时我有点蒙逼，个人熟练运用vue但并未去探究其原理，所以GG 现在讲解一下： get和set是es5也就是es2015中的对象访问器，它在对象属性或方法获取值（get）时被触发，同时设置值得时候也会触发（set） 这是es5的特性 vue中的运用： vue在组件本身是一个对象，当将此对象传入vue的实例的时候，vu...
vue 中 computed属性中的get与set；
YZ_ZZZ24的博客
05-17 8218
1.computed是对⾃⼰定义的变量进⾏监控，这⾥的变量不是在data中定义，直接 在computed中定义，然后变量放到展⽰页⾯后就实现了数据的双向绑定，当变量发 ⽣改变是就会触发计算，说到这就要说说第⼆点get和set ⽅法了， 2.computed中有get和set⽅法，（在默认的情况下只有get） 1.get⽅法是取，相当于我们可以在get中给这个计算属性中的变量赋值 2.set⽅法是改变时触发，这⾥的改变指的是当我们在computed中定义的变量的值发⽣改变是，会触发set⽅法，这样我们就
vue中的计算属性set与get
最新发布
07-15
在Vue中，计算属性是一种可以根据其他属性的值计算出新值的属性。计算属性有两个主要的方法：get和set。 get方法用于获取计算属性的值。当其他依赖的属性发生改变时，该方法会重新计算计算属性的值，并返回新的值。例如： ```javascript computed: { fullName() { return this.firstName + ' ' + this.lastName; } } ``` 在上面的例子中，fullName是一个计算属性，它依赖于firstName和lastName这两个属性。当firstName或lastName发生改变时，get方法会重新计算fullName的值。 set方法用于修改计算属性的值。当我们对计算属性进行赋值时，set方法会被调用。例如： ```javascript computed: { fullName: { get() { return this.firstName + ' ' + this.lastName; }, set(value) { const [firstName, lastName] = value.split(' '); this.firstName = firstName; this.lastName = lastName; } } } ``` 在上面的例子中，我们定义了一个fullName计算属性，并且同时定义了get和set方法。当我们对fullName进行赋值时，set方法会被调用，然后根据赋值的新值来更新firstName和lastName属性。 需要注意的是，计算属性默认情况下只有get方法，如果我们只需要获取计算属性的值而不需要修改它，可以省略set方法的定义。另外，计算属性不能与data中已有的属性重名，否则会导致命名冲突。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值