Vue 计算属性得getter和setter（九）

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

  get： 首先会寻找 data 里得 fullName值，如果不存在，那么寻找computed里得，这里就找到了get

  set： 只有改变 fullName里get 里存在的值话，那么就会重新改变fullName的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的setter和getter</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        {{fullName}}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Dell',
                lastName: 'lee'
            },
            computed: {
                fullName: {
                    get: function() {
                        return this.firstName + " " + this.lastName;
                    },
                    set: function (value) {
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        });
    </script>
</body>
</html>

 

Yee Jason
关注
专栏目录
由Vue引发的getter和setter思考
weixin_30606669的博客
10-25 623
公司的新项目决定使用Vue.js来做，当我打印出Vue实例下的data对象里的属性时，发现了一个有趣的事情： 它的每个属性都有两个相对应的get和set方法，我觉的这是多此一举的，于是去网上查了查Vue双向绑定的实现原理，才发现它和Angular.js双向绑定的实现原理完全不同，Angular是用的数据脏检测，当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图。而Vue...
Vue基础-计算属性的getter和Setter
多一点开心
10-06 1213
计算属性的getter和Setter一、getter和setter二、代码 一、getter和setter 当我们取计算属性值的时候会执行get方法，设置的时候会执行set方法 二、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算属性的getter和Setter</title> <script src="./vue.js">&lt
Vue 理解之白话 getter/setter详解
10-17
主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue之数据代理（getter、setter）
浩泽学编程的博客
05-24 1803
数据代理以上就是对数据代理的讲解，以及对Object.defineProperty()这个API的简讲。
02-详细介绍Vue中的数据代理(getter)和数据响应式(setter)
欢迎阅读我的博客
11-01 495
/ 对于Vue实例vm来说，_data和$data都直接指向了底层真实的data对象,_data是私有的用于框架内部使用的, $data是公开的是给程序员使用。// 如果我们程序员不想走代理的方式读取data(不走getter和setter方法)，可以通过_data和$data属性直接读取data当中的数据。// 如果data不是函数，则直接将data对象返回给data变量, 并且同时将data对象赋值给vm._data属性。// 数据代理: 给vm新增属性,代理_data即data对象的所有属性。
Vue的计算属性setter和getter_vue中 setter函数getter函数
最新发布
04-15 525
【代码】Vue的计算属性setter和getter_vue中 setter函数getter函数。
谈谈因Vue.js引发关于getter和setter的思考
10-20
在Vue实例中，当我们声明一个data对象，Vue会自动为其中的每一个属性生成对应的getter和setter。当尝试访问或修改这些属性时，实际上是在调用这些getter和setter。例如，如果我们有以下Vue实例： ```javascript new...
vue计算属性的getter和setter
04-02
Vue计算属性的getter和setter分别用于获取计算属性的值和设置计算属性的值。 在计算属性中，getter函数用于获取计算属性的值，setter函数用于设置计算属性的值。当计算属性的值发生变化时，Vue会自动更新相关的视图...
Vue 3-计算属性的getter,setter
Lin16819的博客
09-17 908
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Vue计算属性的getter和setter
Smart_J_King的博客
09-11 148
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性的getter和setter</title> <script src="./vue.js">.
vuex 实现getter值赋值给vue组件里的data示例
10-16
今天小编就为大家分享一篇vuex 实现getter值赋值给vue组件里的data示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue——什么是setter、getter
chengzhangdewo的博客
10-11 3155
对象有两种属性： 数据属性: 就是我们经常使用的属性 访问器属性: 也称存取器属性（存取器属性就是一组获取和设置值的函数） 数据属性就是a和b； get和set就是关键字 它们后面各自对应一个函数，这个函数就是上面红字部分所讲的，存储器属性。 get对应的方法称为getter，负责获取值，它不带任何参数。set对应的方法为setter，负责设置值，在它的函数体中，一切的return都是无效的。 ...
vue中计算属性的getter和setter
nanzai11111的博客
10-08 336
<div id="app"> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName:'kobe', lastName:'bryant' }, computed:{
vue之计算属性的setter和getter
兮动人
09-29 642
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{fullName}}</h2> </div> <scrip...
vue 计算属性的setter和getter
HuangsTing的博客
08-13 542
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter getter 用于监控属性变化时触发。 set可选，当computed属性自身被赋值时触发 <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ ...
vue.js计算属性(getter | setter)
Code_Pupil的博客
03-25 1021
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
vue 计算属性_（Vue基础）4.深入Vue计算属性：getter和setter
weixin_39932300的博客
12-05 154
关键词：computed（getter、setter）注意：split()方法用于把一个字符串分割成字符串数组一、原始的Vue实例computed<body> <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ el: "#app...
vue的computed中的getter和setter
weixin_71893790的博客
12-13 782
vue的computed中的getter和setter
vue 计算属性的getter 与 setter
purple_lumpy的博客
09-24 509
计算属性上，可以设置，set 与get: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;计算属性的 getter 与 setter&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script src="./vue.js"&gt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值