vue的计算属性computed中getter和setter的使用

最新推荐文章于 2024-06-26 17:49:09 发布

wq3562145

最新推荐文章于 2024-06-26 17:49:09 发布

阅读量1k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/wq3562145/article/details/111225106

版权

本文探讨了Vue.js中计算属性computed的getter和setter的使用。getter用于组合nameone和nametwo的值形成namethree，而setter则在namethree改变时更新nameone和nametwo的值，确保数据同步。通过实例展示了如何在Vue组件中有效地利用计算属性进行双向数据绑定。

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

vue的计算属性computed中getter和setter的使用

vue官方：计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
个人理解：getter是用来获取的，setter是用来设置的
例如：

<div class="home">
	 <input type="text"  v-model="nameone"/>
	 <input type="text"  v-model="nametwo"/>
	 <input type="text"  v-model="namethree"/>
  </div>

data(){
	  return{
		  nameone:"",
		  nametwo:"",
	  }
  },
computed:{
	  namethree:{
		  get(){
			 return this.namethree=this.nameone+" "+this.nametwo
		  },
		  set(value){
			 var name=value.split(" ")
			  this.nameone=name[0]
			  this.nametwo=name[1]
		  }
	  }
	  
  }

get()获取nameone和nametwo的值，拼接成为namethree的值；
set()设置namethree的发生变化时，nameone和nametwo的值也会更新。