Vue computed get&set使用方法案例

最新推荐文章于 2024-04-02 16:42:22 发布

EsquireY

最新推荐文章于 2024-04-02 16:42:22 发布

阅读量698

点赞数

分类专栏： Vue 文章标签： computed getter setter

本文链接：https://blog.csdn.net/esquirey/article/details/122213944

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中计算属性的get和set方法。通过示例代码展示了如何使用get来创建响应式的计算属性，并通过setter实现当属性值变化时的监听和更新操作。在示例中，点击按钮会触发setter改变msg的值，从而影响到页面显示。

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

1，get

<template>
	<div id="app">
		<p> {{msg}} </p>
		<p>计算属性computed {{testMsg}}</p>
		<button type="button" @click="updateTestMsg"> 改变msg的值</button>
	</div>
</template>

<script>
	export default {
		name: 'App',

		data() {
			return {
				msg: "100"
			}
		},
		computed: {
			// 使用 getter 属性的第一种方法
			// testMsg: function() {
			// 	return this.msg + "人"
			// }
			testMsg: {
				// 使用 getter 属性的第二种方法
				get() {
					console.log("调用getter属性")
					return this.msg + "人"
				},
			}
		},
	}
</script>

2，set

<template>
	<div id="app">
		<p> {{msg}} </p>
		<p>计算属性computed {{testMsg}}</p>
		<button type="button" @click="updateTestMsg"> 改变msg的值</button>
	</div>
</template>

<script>
	export default {
		name: 'App',

		data() {
			return {
				msg: "100"
			}
		},
		computed: {
			// 使用 getter 属性的第一种方法
			// testMsg: function() {
			// 	return this.msg + "人"
			// }
			testMsg: {
				// 使用 getter 属性的第二种方法
				get() {
					console.log("调用getter属性")
					return this.msg + "人"
				},

				// 使用 setter 属性的方法
				set(newValue) {
					console.log("调用setter属性", newValue)
					this.msg = newValue
				}

			}
		},

		methods: {
			// 触发 setter 的方法
			updateTestMsg() {
				this.testMsg = 200
			}
		}
	}
</script>

在这里插入图片描述