vue计算属性computed中get() set() 的使用方法简单示例

最新推荐文章于 2024-07-16 09:46:43 发布

“ Folding wing”

最新推荐文章于 2024-07-16 09:46:43 发布

阅读量1.4k

点赞数 2

文章标签： computed vue get() set()方法

本文链接：https://blog.csdn.net/qq_44185284/article/details/103065088

版权

vue计算属性computed中get() set() 的使用方法简单示例

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		// 用{{方法名}} 显示结果
			<h2>{{fullName}}</h2>
		</div>
	</body>
</html>

js代码：

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	let vue = new Vue({
		el: '#app',
		data: {
			firstName: 'Jackson',
			lastName: 'Yee'
		},
		// 在computed计算属性中定义计算属性的方法.
		computed: {
			// 计算属性一般只写get方法 set方法一般不用
			fullName: {
				/*set () {
					 可以给属性设置值
				}*/
				get () {
					return this.firstName + ' ' + this.lastName
				}
			}
		}
	})
</script>