(精華2020年5月4日更新) vue教程篇 計算屬性computed的使用

2b勿擾發表於2020-05-04
Vue
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>計算屬性</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<!-- 
			1.基本用法
		 -->
		<h2>msg： {{msg}}</h2>
		<h2>msg2 ：{{msg2}}</h2>

		<!-- 對資料處理再顯示 -->
		<h2>msg : {{msg.split(' ').reverse().join(' ')}}</h2>
		<h2>reverseMsg : {{reverseMsg}}</h2>
		<button @click="change">修改計算屬性</button>

		<!-- 
			2.計算屬性 vs 方法
		 -->
		<h2>num1： {{num1}}</h2>
		<h2>num2 -計算屬性 ：{{num2}}</h2>
		<h2>getNum 函式: {{getNum2()}}</h2>

		<!-- 
			3.get和set
		 -->
		<!-- <h2>{{num2}}</h2>
		 <button @click="change2">修改計算屬性</button> -->


	</div>


	<script>
		var vm = new Vue({
			el: '#app',
			data: { //普通屬性
				msg: 'welcome to itapp',
				num1: 8
			},
			computed: { //計算屬性
				msg2: function () {
					//該函式必須有返回值，用來獲取屬性，稱為get函式
					return 'hello';

				},
				reverseMsg() {
					return this.msg.split(' ').reverse().join(' ');
				},
				num2: {
					get() {
						console.log('num2：' + new Date());
						return this.num1 - 1;
					},
					set(val) {
						console.log('修改num2的值');
						this.num1 = val;
					}
				}
			},
			methods: {
				change() {
					this.num2 = 50;
				},
				getNum2() {
					console.log(new Date());
					return this.num1 - 1;
				},
			},
			mounted() {
				// // 多次調取計算屬性，可以從快取獲取， 提高效能
				setInterval(function () {
					// console.log(vm.num2); //從快取獲取
					console.log(vm.getNum2()); //每次都要執行函式
				}, 1000);
			}
		});
	</script>
</body>

</html>

相關文章