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

柔光的暖阳◎ 2022-02-02 10:57 481阅读 0赞

大家都知道computed简单的使用方法，这儿只分享一下setter和getter用法：

setter：设置值时触发。

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<button @click="setter">设置</button>
    			<p>原始数据：</p>
    			<p>{
       {fullName}}</p>
    		</div>
    	</body>
    	<script type="text/javascript">
    		let vm = new Vue({
    		  // 选项
    		  el: '#app',
    		  data:{
    		  	provice:'Guangdong',
    		  	city:'guangzhou'
    		  },
    		  methods:{
    		  	setter:function(){
    		  		this.provice='Taiwan'
    		  		this.city='taipei'
    		  	}
    		  },
    		  computed: {
    			  fullName: {
    			    // getter
    			    get: function () {
    			      return this.provice + ' ' + this.city
    			    },
    			    // setter
    			    set: function (newValue) {
    		    	  console.log(newValue);
    			      let names = newValue.split(' ')
    			      this.provice = names[0]
    			      this.city = names[names.length - 1]
    			    }
    			  }
    			}
    		})
    	</script>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 07vue_计算属性_setter和getter

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

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

相关深入理解 Vue Computed 计算属性

Computed 计算属性是 Vue 中常用的一个功能，但你理解它是怎么工作的吗？拿官网简单的例子来看一下： <div id="example"> <

电玩女神/ 2022年05月27日 13:27/ 0 赞/ 252 阅读

相关 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 阅读

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

watch和computed各自处理的数据关系场景不同 1.watch擅长处理的场景：一个数据影响多个数据 2.computed擅长处理的场景：一个数据受多个数据影响

女爷i/ 2022年02月01日 20:15/ 0 赞/ 245 阅读

相关计算属性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 阅读