07vue_计算属性_setter和getter

ゝ一世哀愁。 2022-05-31 10:50 170阅读 0赞

![20180222153952796][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>		
    		<div id="app1">
    			firstname:{
       {firstname}}<br/>
    			lastname:{
       {lastname}}<br/>
    			fullName:{
       { fullName }}<br/>
    			<input type="text" v-model="fullName"/>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		firstname:"田",
    		lastname:"江"
    	},
    	computed:{
    		fullName:{
    			//getter
    			get:function(){
    				return this.firstname+"."+this.lastname
    			},
    			//setter
    			set:function(newValue){
    				let arr = newValue.split(".");
    				this.firstname = arr[0];
    				this.lastname = arr[1];
    			}			
    		}
    	}
    });
    
    </script>

[20180222153952796]: /images/20220531/e83389fbe22e4966aad2ee40819239fe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 getter 和 setter方法

getter 和 setter方法概述： > 就是属性封装后对外提供的获取和修改对应属性值的访问方式 getter方法：获取对应属性的属性值 > 格式：g

古城微笑少年丶/ 2022年12月28日 08:15/ 0 赞/ 177 阅读

相关 Vue引发的getter和setter

[Vue引发的getter和setter][Vue_getter_setter] 看着文档研究了一下vue的双向数据绑定,打印出Vue实例下的data对象里的属性时

深藏阁楼爱情的钟/ 2022年11月22日 12:44/ 0 赞/ 180 阅读

相关 07vue_计算属性_setter和getter

![20180222153952796][] <!DOCTYPE html> <html> <head> <meta charse

ゝ一世哀愁。/ 2022年05月31日 10:50/ 0 赞/ 171 阅读

相关 Vue之计算属性getter和setter

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get&set</title

妖狐艹你老母/ 2022年05月23日 12:56/ 0 赞/ 220 阅读

相关 Vue的计算属性,方法与侦听器以及计算属性的 getter 和 setter

计算属性：优先推荐，原因：既简洁又性能高 <body> <div id="app"> { {fullName}}

妖狐艹你老母/ 2022年04月22日 09:10/ 0 赞/ 215 阅读

相关 Vue 中计算属性的 setter 和 getter

计算属性其实是非常强大的，这一节深入的学习下计算属性，先看一段代码： <div id="app"> { {fullName}}

素颜马尾好姑娘i/ 2022年03月07日 05:04/ 0 赞/ 247 阅读

相关对vue计算属性computed的setter与getter的理解

大家都知道computed简单的使用方法，这儿只分享一下setter和getter用法： setter：设置值时触发。 getter：获取值时触发，与setter是没有必然

柔光的暖阳◎/ 2022年02月02日 10:57/ 0 赞/ 482 阅读

相关计算属性computed里面的getter和setter

参考一：在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取）和 setter（

青旅半醒/ 2021年12月20日 11:57/ 0 赞/ 574 阅读

相关 vue 计算属性的setter和getter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter getter 用于监控属性变化时触发。 set可选，当computed属性自身被

冷不防/ 2021年11月02日 08:54/ 0 赞/ 358 阅读

相关 Vue - 深入使用计算属性 —— setter 和 getter

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。每一个计算属性都包含一个 getter 方法和一

女爷i/ 2021年07月26日 00:18/ 0 赞/ 491 阅读