计算属性的用途
当表达式过长,或数据需要参与复杂的逻辑运算后返回,可能会让表达式臃肿或者难以维护,例如:
{{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第一站深入浅出(五)