Vue的计算属性的getter和setter

最新推荐文章于 2023-09-08 20:18:03 发布
最新推荐文章于 2023-09-08 20:18:03 发布
阅读量131 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37117521/article/details/102547119
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>计算属性的getter和setter</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<div>{{name}}</div>
	</div>
	<script >
		var vm = new Vue({
			el:'#app',
			data:{
				firstName:"zy",
                lastName:"l"
			},
            //计算属性 有缓存机制 依赖的值改变时才重新渲染
            computed: {
				name: {
					get: function () {
						console.log("计算了一次");
						return this.firstName + " " + this.lastName
					},
					set: function (value) {
						var arr =value.split(" ");
						this.firstName = arr[0];
						this.lastName = arr[1];
					}
				}
			}
        })

    </script>
</body>

</html>

 

华天下之大软
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-计算属性的getter和setter
weixin_45497246的博客
03-25 353
计算属性默认只有 getter，不过在需要时也可以提供一个 setter： <body> <div id="root">{{fullName}}</div> <script> var vm = new Vue({ el:"#root", data:{ ...
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计算属性computed--getter和setter
weixin_53961451的博客
06-17 1439
vue计算属性computed--getter和setter
07~vue中计算属性computed的getter和setter
最新发布
俗人世界
09-08 274
每一个计算属性中都有一个getter和setter,当调用计算属性的时候, 就会自动调用getter这个方法,计算属性一般是没有setter方法,计算属性是只读属性,一般不会更改这个计算属性
Vue的计算属性setter和getter
qq_44534541的博客
05-07 1247
每一个计算属性都包含一个getter和一个setter 一般情况，我们只是使用getter来读取。 在某些情况下，你也可以提供一个setter方法（不常用） <div id="app"> <h2>{{firstName}}</h2> <h2>{{lastName}}</h2> <h2>{{fullName}}</h2> <h1>{{fullName02}}</h1>
谈谈因Vue.js引发关于getter和setter的思考
10-20
在Vue实例中，当我们声明一个data对象，Vue会自动为其中的每一个属性生成对应的getter和setter。当尝试访问或修改这些属性时，实际上是在调用这些getter和setter。例如，如果我们有以下Vue实例： ```javascript new...
Vue 理解之白话 getter/setter详解
10-17
Vue通过响应式原理，将普通的JavaScript对象属性转换成getter和setter，以此来实现数据的双向绑定和状态管理。下面我们将详细地探讨Vue中的getter和setter是如何工作的，以及它们背后的实现原理。 首先，Vue.js框架...
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中computed 计算机属性、getter、setter
weixin_50723416的博客
08-09 814
计算属性 在模板表达式中放入太多逻辑时，会让模板重且难以维护。比如： // 错误示例 <div id="example"> {{ message.split('').reverse().join('') }} </div> 应该声明一个计算属性，该计算属性不用挂载到Vue实例的data上，而是在Vue实例中的computed上。程序员编写的函数将作用与 property.vm.reversedMessage 的 getter函数 具体看https://cn.vuejs.org/
Vue父组件ajax请求到的数据父子组件间传值
qq_37117521的博客
10-17 801
举个栗子，父组件 <template> <div> <Home-header></Home-header> <Home-swiper :list="swiperList"></Home-swiper> <Home-Icons :list="iconList"></Home-Ic...
vue3知识点汇总
qq_37117521的博客
08-19 622
​vue3和vue2的对比和一些个人理解
实现过渡进场和出场的动画效果
qq_37117521的博客
11-17 607
以下是vue动画从入门到跑路目录 Vue中CSS动画原理 实现过渡进场和出场的动画效果 在Vue中使用Animate.css库 同时具备过渡和动画效果 Vue中的js动画与Velocity.js的结合 Vue中多个元素或组件的过渡 Vue中的列表过渡 Vue中的动画封装 <html> <head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <s...
Vue2.5开发去哪儿网App
qq_37117521的博客
11-19 544
项目源码下载链接 https://download.csdn.net/download/qq_37117521/11985714 首页使用轮播插件swesome-Swiper swesome-Swiper的GitHub链接: https://github.com/surmon-china/vue-awesome-swiper 城市列表页面使用了Better-scroll和字母...
Vue常用组件——轮播区域分页显示逻辑实现
qq_37117521的博客
10-16 436
<template> <div class="icons"> <swiper > <swiper-slide v-for="(page,index) of pages" :key="index"> <div class="icon" v-for="item of ...
在Vue中使用Animate.css库
qq_37117521的博客
11-15 427
实现隐藏和显示的时候放大缩小动态过渡。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="./vue.js"></script> <style> @keyframes bounce-in{ 0% { .
Vue中的列表过渡
qq_37117521的博客
11-17 413
实现点击按钮的时候，添加的列表项过渡显示。 原理：使用transition-group之后，相当于transition-group里包裹的标签都在外头套一层transition，此处则相当于是在每个div外头都套了一层transition <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中的列表过渡</title> <script src=.
Vue中的js动画与Velocity.js的结合
qq_37117521的博客
11-16 314
使用js动画钩子实现： 从隐藏到显示的时候。一开始是红色，2s后变成绿色，再2s后变成黑色，done()函数执行表示动画结束就会开始执行after-enter <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="./vue.js"></script> </head
Vue中多个元素或组件的过渡
qq_37117521的博客
11-16 256
实现show为true的时候，hello world显示在页面上，当show为false的时候， bye worldx显示在页面上. 注意： 1、默认的前缀是v，要是要换其他前缀就给transition加上属性name，如name="fade" 2、如果不加上key的话会复用页面的DOM，就不会出现动画效果，加上key之后，就不会复用了 3、mode是控制组件是先显示再隐藏还是先隐藏再显示，in-out表示先进场再出场，即先显示，再隐藏；out-in表示先出场再进场。 <!DOCTYPE.
Vue中CSS动画原理
qq_37117521的博客
10-15 248
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="./vue.js"></script> <style> .fade-enter, ....
vue计算属性的getter和setter
04-02
Vue计算属性的getter和setter分别用于获取计算属性的值和设置计算属性的值。 在计算属性中，getter函数用于获取计算属性的值，setter函数用于设置计算属性的值。当计算属性的值发生变化时，Vue会自动更新相关的视图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值