5.4计算属性

最新推荐文章于 2024-10-15 09:57:04 发布

泡老师大迷弟

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量100

点赞数

分类专栏： Vue学习文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/PengK_aha/article/details/128080701

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

计算属性
   1.为何需要计算属性
       表达式的计算逻辑可能回比较复杂，使用计算属性可以使模板内容更加简洁

   2.计算属性的用法
   computed: {
       reverseString: function(){
           return this.msg.split('').reverse().join('');
       }
   }

   <div>{{msg}}</div>
   <div>{{reverseString}}</div>

3.计算属性与方法的区别
       1.计算属性是基于它们的依赖进行缓存的
           数据无变化，执行一次缓存数据，节约性能
       2.方法不存在缓存
           每次调用都会执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div>{{reverseString}}</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	计算属性
	1.为何需要计算属性
		表达式的计算逻辑可能回比较复杂，使用计算属性可以使模板内容更加简洁
		
	2.计算属性的用法	
	computed: {
		reverseString: function(){
			return this.msg.split('').reverse().join('');
		}
	}
	
	<div>{{msg}}</div>
	<div>{{reverseString}}</div>
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			computed: {
				reverseString: function(){
					return this.msg.split('').reverse().join('');
				}
			}
			
		});
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div>{{reverseString}}</div>
			<div>{{reverseString}}</div>
			<div>{{reverseMsg()}}</div>
			<div>{{reverseMsg()}}</div>
			<div>{{CountTotal}}</div>
			<div>{{CountTotal}}</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	计算属性
	3.计算属性与方法的区别
		1.计算属性是基于它们的依赖进行缓存的
			数据无变化，执行一次缓存数据，节约性能
		2.方法不存在缓存
			每次调用都会执行
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 num: 100,
			},
			computed: {
				reverseString: function(){
					console.log('computed')
					return this.msg.split('').reverse().join('');
				},
				CountTotal: function(){
					console.log('total')
					var total = 0;
					for(var i=0; i<= this.num; i++ ){
						total +=i;
					}
					return total;
				}
			},
			methods: {
				reverseMsg: function () {
					console.log('method')
					return this.msg.split('').reverse().join('');
				}
			}
		});
	</script>
</html>