Vue.js初次尝试，计算属性（八）
2018-11-17 本文已影响1人
葉糖糖
计算属性，主要用来处理一些复杂的业务逻辑。通过使用计算属性，可让页面模板做到清晰有条理。否则就很像早期的jsp页面一样，一会儿看的是
html代码，一会儿又掺杂着java部分的业务逻辑代码。我们在前端需要一个计算属性，让vue去做业务处理，在模板中直接获取值。
一、代码示例
这段代码参考官方文档，可以看出来第一种一般写法可以满足开发要求，但是略显不美观，不简洁。假想一下，如果我们需要在页面的其它元素中使用这个属性（name），那是不是都要复制这一长串
{{name.split('').reverse().join('')}}?
那有什么简便方法呢？当然，使用计算属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--一般写法-->
<p>{{name.split('').reverse().join('')}}</p>
<!--使用计算属性-->
<p>{{ reversedMessage }}</p>
</div>
</body>
</html>
<script type="text/javascript">
//定义json数据
data={name:"Good jop!",message:"hello SugarYe"};
//创建Vue实例
var app =new Vue({
el:'#app',
data:data,
computed:{
//计算属性的getter方法，这里暴露的是reversedMessage
reversedMessage:function () {
//返回处理结果
return this.message.split('').reverse().join('');
}
}
})
</script>
PS：你可以使用计算属性为所欲为，演示的程序只是一个简单的入门。希望小伙伴们可以自由发挥自己的聪明才智。
