vue计算属性之：computed属性中的get与set用法

最新推荐文章于 2024-05-18 16:55:08 发布

管火火火

最新推荐文章于 2024-05-18 16:55:08 发布

阅读量1.4k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_38373875/article/details/100703635

版权

set：设置值时触发。get：获取值时触发，与set是没有必然联系的。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="https://...

摘要由CSDN通过智能技术生成

set：设置值时触发。

get：获取值时触发，与set是没有必然联系的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
 
<body>
    <div id="div"> 
        <input v-model="changeFirstNameFn">
        <input v-model="changeSecondNameFn">
    <br />
    全名：<input id="full" v-model="fullName">
</div>
 
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<script> 
var a=new Vue({
el:"#div",               
data:{ 
	firstName:"",
	lastName:"",
	fullName:""
}, 
computed:{
	changeFirstNameFn:{
		get:function(){      // get 函数，返回绑定的“姓” 的输入框的value 值
			return this.firstName
		},
		set:function(newVal){ //set函数是当数据发生变化时调用.监听到 “姓”的变化，执行set 函数
			this.firstName=newVal
			this.fullName=newVal+" "+ this.lastName
		}
	},	
	changeSecondNameFn:{
		get:function(){
			return this.lastName},
		set:function(newVal){   //set 函数是当数据发生变化时调用
			this.lastName=newVal
			this.fullName=this.firstName+"

最低0.47元/天解锁文章

管火火火

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue计算属性之：computed属性中的get与set用法

set：设置值时触发。get：获取值时触发，与set是没有必然联系的。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="https://...
复制链接

扫一扫