Vue教程-Vue计算属性的运用-学习vue第一站深入浅出(四)

计算属性的用途

当表达式过长,或数据需要参与复杂的逻辑运算后返回,可能会让表达式臃肿或者难以维护,例如:

{{result.split(',').reverse().join(',')}}

一个表达式中,包含多个操作,导致很难阅读,这时候应该使用计算属性了!

改写后的代码为:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性-示例</title>
	</head>
	<body>
		<div id="app"> 
			<h1> {{resultText}} </h1>
		</div>
		<script src="js/vue.min.js"></script>
		<script>
 
			var app = new Vue({
				el:'#app',
				data:{
					text:'郝老湿,快显灵'
					},
				computed:{
					resultText:function(){
						return this.text.split(',').reverse().join(',');
					}
				}
			})
 
		</script>
	</body>
</html>

输出结果为:快显灵,郝老湿。

在计算属性里,可以完成复杂的业务逻辑处理、数据二次加工、内部方法的调用等,只要最终返回一个结果就可以了。


下面您将继续学习

Vue教程-Vue语法糖与v-bind绑定CSS样式-学习vue第一站深入浅出(五)

发布了28 篇原创文章 · 获赞 12 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43687095/article/details/94394197