计算属性 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			{{reversedMessage}}
		</div>
	</body>
	
	<script>
		var app = new Vue({
			el : "#app",
			data : {
				message : "vue",
			},
			/**
			 * 计算属性是基于它们的响应式依赖进行缓存的
			 * 只要 message 还没有发生改变，
			 * 多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数
			 */
			computed: {
				// 计算属性的 getter
				reversedMessage: function () {
				  // `this` 指向 vm 实例
				  return this.message.split('').reverse().join('')
				}
		    }
			
		})
	</script>
</html>
posted @ 2022-12-01 19:04  lwx_R  阅读(11)  评论(0)    收藏  举报