尚硅谷的vue旅程05-vue的计算属性高级(setter和getter方法的重写，实现了数据的双向交互)

最新推荐文章于 2023-06-07 01:59:12 发布
最新推荐文章于 2023-06-07 01:59:12 发布
阅读量261 收藏
点赞数
分类专栏： Vue尚硅谷学习旅程 文章标签： vue.js html html5 javascript vue
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/A_Bow/article/details/113531336
版权
本文探讨了Vue的计算属性中setter和getter的高级用法，通过重写这些方法，详细解释了如何实现数据的双向交互，以增强组件的功能和用户体验。
摘要由CSDN通过智能技术生成

简介

计算属性高级:（getter实现对数据的展示；setter是实现对数据的监视）
通过gettertter实现对属性数据的显示和监视
(计算属性存在缓存，多次读取只执行一-次getter计算)

代码示例

<div id="demo">
	姓: <input type= "text" placeholder="FirstName" v-model="firstName"><br>
    名: <input
最低0.47元/天 解锁文章
不许人间见秃头xbw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础-计算属性的getter和Setter
多一点开心
10-06 1183
计算属性的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
vuex 实现getter值赋值给vue组件里的data示例
12-13
通过watch将orderDetailsData对象赋值给data中的consignee对象，这样能将操作能避免v-model修改时，直接改动vuex中的值。 <template> <input type="text" placeholder="请输入收货人名字" v-model="consignee.name"> <input type="text" placeholder="请输入收货地址" v-model="consignee.address"> <input type="text" placeholder="请输入收货人手机号" v-model="consignee.mobil
vue 计算属性_（Vue基础）4.深入Vue计算属性：getter和setter
weixin_39932300的博客
12-05 139
关键词：computed（getter、setter）注意：split()方法用于把一个字符串分割成字符串数组一、原始的Vue实例computed<body> <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ el: "#app...
关于重写getter的方法和setter方法
Dwyane_Coding
11-23 1540
我们都知道，当我们利用@property创建一个属性的属性的时候           它会声明属性和创建该属性的setter 和 getter方法   从英文单词来看， setter方法是是赋值用的，而getter方法是取值用的 每当用于需要赋值或者取值时，系统都会自动调用这两个方法 但是有时我们需要增加里面的功能（比如说加入具体的数组，加入判断语句····），那就需要重写方法
vue计算属性computed的getter和setter
weixin_44293690的博客
12-16 482
简单介绍 在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： <div id="demo">{{ fullName }}</div> var vm = new V
Vue中计算属性的getter跟setter
killbee365的博客
04-30 796
每个计算属性都包含一个getter跟一个setter 当你没有set方法的时候那么你的计算属性就只有只读属性，不能被更改，set方法可以省略，当你计算属性设为只读属性的时候，get也可以省略。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...
谈谈因Vue.js引发关于getter和setter的思考
10-20
本文将深入探讨Vue.js中getter和setter在实现数据双向绑定中的关键作用。 首先，我们要了解在JavaScript中，getter和setter是Object对象的方法，用于在访问或修改对象属性时执行自定义逻辑。getter用于获取属性值，...
Vue 3-计算属性的getter,setter
Lin16819的博客
09-17 870
<!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实现双向绑定的原理以及响应式数据的方法
12-12
总的来说，Vue的双向绑定和响应式数据主要依赖于`Object.defineProperty()`、数据依赖收集、setter/getter、`Dep`和`Watcher`的机制。通过这些技术，Vue能够实现在数据变化时自动更新视图，以及在大量数据更新时的...
vue——计算属性的setter和getter
weixin_54362381的博客
08-21 478
计算属性的setter和getter: 使用插值表达式的时候，会先去data里找，找不到的话再去计算属性里找。 计算属性computed里的属性可以写成对象的形式，然后在这个对象里定义两个方法set和get，get返回这个属性，set设置这个属性，调用的时候直接使用（vue实例.计算属性）的格式【比如vm.fullName是调用的get方法，返回fullName；vm.fullName="Dol Wsk"是调用set方法，设置fullName】。 <div id="app"> {{fullN
重写setter与getter方法以及其使用情况
jzq_sir的博客
10-02 2131
1.setter方法：   对成员变量进行赋值，相当于写入操作；是为了从外部类得到一个参数，赋值给内部变量；其函数名必须以set开头，必须有一个参数；   例子：- (void)SetName:(NSString *)newName         { _name = newName;把外部类传过来参数赋值（写入）给内部变量。  } 2.getter方法：   对成变量进行取值操作，
尚硅谷的vue旅程04-vue的计算属性(computed)和监听(watch)
code^_^熊的博客
02-01 149
简介 1.计算属性 (将数据在computed对象中“加工”后,再显示出来) 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2.监视属性: (注意:要对变化的对象进行监视.监视有两种方式) 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时，回调函数自动调用，在函数内部进行计算 3.计算属性高级:（getter实现对数据的展示；setter是实现对数据的监视） 通过getter/setter实现对属性数据的显示和监视
尚硅谷Vue学习——计算属性
小缘同学的博客
03-10 510
1.定义：要用的属性不存在，要通过已有属性计算得来。 2.原理：底层借助了Pbject.defineproperty方法提供的getter和setter。 3.get函数什么时候执行？ 初次读取时会执行一次。 当依赖的数据产生变化时会再次调用 4.优势：与methods方法相比，内部具有缓存的机制，效率更高，调试方便 5.备注： 计算属性最终会出现在vm上，直接读取使用即可。 如果计算属性需要被修改，则必须去写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。 ...
尚硅谷 Vue 学习笔记(3) 计算属性和监视
WoHowLearn的博客
10-23 266
vue实例vm有4个属性el, data, computed, watch , computed 即计算属性: computed: 执行时间: 1.初始化显示执行 2.相关的data属性数据(this.firstName , this.lastName)发生变化 3.this 指的是vm对象 fullName1( ) 和fullName3 括号什么意思具体看截图的代码注释; watch 和 ...
重写vue的computed的get和set
weixin_38547641的博客
09-01 629
比如，有一个checkList数组，在computed中重写它的get和set computed() { checkList: { get() { //return 一个值 } set(newVal) { } } }
vue computed计算属性getter 与setter的使用
weixin_40030173的博客
01-07 817
getter 读调用 setter 写调用 计算属性的 setter 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter getter的使用，如下： <template> <div class="page"> <p>{{firstName}}</p> <p>{{lastName}}</p> <p>{{fullName}}</p> </div> </
vue-自定义指令
qq_52135740的博客
07-27 462
自定义指令 一、定义语法： (1).局部指令： new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) }) (2).全局指令： Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 二、配置对象中常用的3个回调： (1).bind：指令与元素成功绑定时调用。 (2).inserted：指令所在元素被插入
Vue的计算属性
最新发布
qq_50260510的博客
06-07 4172
Vue的计算属性
vue计算属性的getter和setter
04-02
Vue计算属性的getter和setter分别用于获取计算属性的值和设置计算属性的值。 在计算属性中，getter函数用于获取计算属性的值，setter函数用于设置计算属性的值。当计算属性的值发生变化时，Vue会自动更新相关的视图。 例如，下面的代码中，计算属性fullName由firstName和lastName计算而来。getter函数返回fullName的值，setter函数用于设置firstName和lastName的值。 ``` data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName: { get() { return this.firstName + ' ' + this.lastName }, set(value) { const names = value.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } ``` 在模板中，我们可以直接使用计算属性fullName： ``` <div>{{ fullName }}</div> ``` 当我们修改fullName的值时，会自动调用setter函数，更新firstName和lastName的值： ``` this.fullName = 'Jane Smith' ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值