计算属性-了解计算属性的应用场景

1.什么是计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="./lib/vue-2.6.12.js"></script>
		<style>
			.box {
				width: 200px;
				height: 200px;
				border: 1px solid #ccc;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div>
				<span>R：</span>
				<input type="text" v-model.number="r">
			</div>
			<div>
				<span>G：</span>
				<input type="text" v-model.number="g">
			</div>
			<div>
				<span>B：</span>
				<input type="text" v-model.number="b">
			</div>
			<hr>

			<!-- 专门用户呈现颜色的 div 盒子 -->
			<!-- 在属性身上，: 代表  v-bind: 属性绑定 -->
			<!-- :style 代表动态绑定一个样式对象，它的值是一个 {  } 样式对象 -->
			<!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 -->
			<div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">
				{{ `rgb(${r}, ${g}, ${b})` }}
			</div>
			<button @click="show">按钮</button>
		</div>

		<script>
			// 创建 Vue 实例，得到 ViewModel
			var vm = new Vue({
				el: '#app',
				data: {
					// 红色
					r: 0,
					// 绿色
					g: 0,
					// 蓝色
					b: 0
				},
				methods: {
					// 点击按钮，在终端显示最新的颜色
					show() {
						console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
					}
				},
			});
		</script>
	</body>

</html>