Vue中计算属性的使用

最新推荐文章于 2024-04-25 09:01:10 发布

碧山云游

最新推荐文章于 2024-04-25 09:01:10 发布

阅读量466

点赞数

分类专栏： Vue.js学习笔记

本文链接：https://blog.csdn.net/qq_41617901/article/details/117049131

版权

Vue.js学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<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>常用特性</title>
</head>
<body>
	<div id="app">
		<!-- 常见的处理方式：比如将文字反转拼接 -->
		<div>{{msg}}</div>
		<div>{{msg.split('').reverse().join('')}}</div>
		<!-- 以上方式可以使用计算属性实现 -->
		<div>{{reverseString}}</div>
		<!-- 以下适用于测试计算属性和方法的区别 -->
		<div>{{reverseString}}</div>
		<div>{{reverseString}}</div>
		<!-- 方法的测试 -->
		<div>{{testDo()}}</div>
		<div>{{testDo()}}</div>
	</div>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
	
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'hello'
			},
			methods:{
				testDo:function(){
					console.log('method');
				}
			},
			computed:{
				reverseString:function(){
					//此处注意，它只会打印一遍，因为已经被缓存，它是基于依赖（根据data里边变量的变化而变化）做缓存，可以节省性能，比如做for循环这种。
					// console.log('computed');
					console.log(this.msg);
					return this.msg.split('').reverse().join('');
				}
			}
		})
	</script>
</body>
</html>

碧山云游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中计算属性的使用

<!DOCTYPE html><html lang="zh"><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>常用特性</title.
复制链接

扫一扫