3.4vue计算属性 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<p>模板语法：{{height.toString().split('').reverse().join('-')}}</p>
		<p>方法：{{reverse()}}</p>
		<p>方法：{{reverse()}}</p>
		<p>计算属性：{{reverseMsg}}</p>
		<p>计算属性：{{reverseMsg}}</p>
		<p>
			{{num}}
			<button @click="num++">加一下</button>
		</p>
		<p>{{show()}}</p>
	</div>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				height:180,
				num:10,
			},
			methods:{
				reverse(){
					console.log('方法');
					return this.height.toString().split('').reverse().join('-');
				},
				show(){
					console.log('这是另一个方法，只调用了一次，但是诡异的是data里的数据变化了，这个方法也会被调用')
				}
			},
			computed:{
				reverseMsg(){
					console.log('计算属性');
					return this.height.toString().split('').reverse().join('-')+this.num;
				}
			}
		});

		/*
			 1、方法调用的时候需要加括号，计算属性不需要
			 2、方法的结果不会被缓存，计算属性的结果会被缓存
		 */
	</script>
</body>

</html>

　　

posted @ 2021-12-31 09:32  JavaShop  阅读(30)  评论(0)    收藏  举报