计算属性(computed)的getter和setter

最新推荐文章于 2024-06-26 17:49:09 发布
最新推荐文章于 2024-06-26 17:49:09 发布
阅读量273 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://blog.51cto.com/5660061/2418992
版权 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <div id="app">{{fullName}}</div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Tom",
                lastName: "Cat"
            },
            computed: {
                /*fullName: function() {
                    return this.firstName + " " + this.lastName
                }*/
                fullName: {
                    get: function() {
                        return this.firstName + " " + this.lastName
                    },
                    set: function(value) {
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                        console.log("我是" + value)
                    }
                }
            }
        })
    </script>
</body>
</html>

计算属性(computed)的getter和setter

baolian1994
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
计算属性setter和getter
weixin_44561961的博客
06-04 210
文章目录一、计算属性setter和getter二、使用步骤1.引入库总结 提示：以下是本篇文章正文内容，下面案例可供参考 一、计算属性setter和getter 示例： 二、使用步骤 1.引入库 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> &lt
Vue中computed 计算机属性、getter、setter
weixin_50723416的博客
08-09 815
计算属性 在模板表达式中放入太多逻辑时，会让模板重且难以维护。比如： // 错误示例 <div id="example"> {{ message.split('').reverse().join('') }} </div> 应该声明一个计算属性，该计算属性不用挂载到Vue实例的data上，而是在Vue实例中的computed上。程序员编写的函数将作用与 property.vm.reversedMessage 的 getter函数 具体看https://cn.vuejs.org/
Computed计算函数getter和setter
最新发布
2301_81965558的博客
06-26 372
计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。1.get方法是当属性被读取时触发，在计算属性中，如果计算属性依赖数据发生变化时会调用get方法，并且会将返回结果缓存起来。2.get方法必须需要一个返回值3.set只有在对计算属性直接赋值的时候触发3.如果set方法没有改变get方法中的依赖数据，则get方法不会再次调用，而是直接使用缓存值。
computed中的getter和setter
weixin_46313540的博客
10-21 2296
1、computed 声明的时候是用方法格式，使用的时候是当做属性 2、computed包含getter（取值）和setter（监听，主动改变） 截图1原本是这样 在这里插入图片描述 3、setter部分，是主动设置， 即运行 vm.fullName = ‘dddd’ 时，setter 就会被调用 get() 获取firstName和lastName的值，拼接； set() 设置 fullName 的发生变化时，smallName的值也会更新。 ...
计算属性computed里面的getter和setter
热门推荐
前端技术的学习整理
06-28 1万+
参考一： 在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： &lt...
computed计算属性和data_3.2 计算属性的 getter/setter 和缓存
weixin_39671964的博客
12-21 212
目标：熟悉 getter 和 setter；methods 与 computed 的区别；计算属性的缓存。一、getter 和 setter首先要明确一点，每一个计算属性都包含一个 getter 函数和 setter 函数。举个栗子：来实现一个 "显示姓名" 的 小demo 。<div id="app"> {{ fullName }} ...
计算属性的setter和getter
weixin_44346827的博客
05-15 107
1如果没有设置，不会变化； 2.split:分割字符串变成数组“ ”，“” <!DOCTYPE html> <html> <head> <title>计算属性的setter和getter</title> <meta charset="utf-8"> <script type="text/...
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
Vue 3-计算属性的getter,setter
Lin16819的博客
09-17 869
<!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
04-02
Vue计算属性的getter和setter分别用于获取计算属性的值和设置计算属性的值。 在计算属性中，getter函数用于获取计算属性的值，setter函数用于设置计算属性的值。当计算属性的值发生变化时，Vue会自动更新相关的视图...
计算属性getter和setter
08-10
计算属性的getter和setter是计算属性的两个方法。getter用于获取计算属性的值，setter用于设置计算属性的值。当获取计算属性时，实际上是在调用计算属性的getter方法，而当设置计算属性的值时，实际上是在调用计算...
计算属性setter与getter
jwz934738949的博客
06-23 425
在Vue的计算属性中，默认调用的是getter属性，而当设置了getter与setter属性之后，每调用一次计算属性，就相当于调用一次getter属性；当计算属性的值发生变化时，会默认调用setter属性，进行相应的操作 格式为： computed: { 计算属性名称: { get: function () { get方法 }, set: function () { set方法 } } } <!DOCTYPE html>
Vue计算属性的getter和setter
Smart_J_King的博客
09-11 128
<!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">.
计算属性的getter和setter方法
407指导员
12-09 236
计算属性的getter和setter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>setter和getter</title> </head> <body> <div id="app"> <h2>{{fullName}}</h2> </div> <scri
vue的computed中的getter和setter
weixin_71893790的博客
12-13 711
vue的computed中的getter和setter
computed:快速理解setter和getter
weixin_33951761的博客
01-09 181
计算属性定义：当其依赖的属性的值发生变化时，这个属性的值会自动更新；同时，与其相关的DOM也会同步更新。 运用范围：模板内的表达式一般都是比较简单的，这是vue设计模板的初衷；如果在模板中放入过多复杂的逻辑，会让模板过重切难以维护。此时，需要使用计算属性。(处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值) 简单的Demo，实现se...
vue中computed以及getter和setter
Sunshinedada的博客
12-02 2862
vue中computed以及getter和setter Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值。 因此在 computed 中可以分成 getter（读取） 和 setter（设值）， 一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： <div id="demo">{{ fullName }}</
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值