本文通过示例对比了在Vue.js中直接使用表达式与使用计算属性来处理字符串的不同方式。介绍了计算属性如何使代码更简洁易读，并提供了一个日期格式转换的具体案例。
在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。
我们来看一个例子，先不使用计算属性
实现将2017-3-15转换为2017.3.15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message.split('-').join(".")}}
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"2017-3-15"
}
})
</script>
</body>
</html>
运行结果如下：
上面的模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原始字符串:{{message}}</p>
<p>修改后的字符串:{{reversedMessage}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"2017-3-15"
},
computed:{
reversedMessage:function () {
return this.message.split('-').join(".")
}
}
})
</script>
</body>
</html>
运行结果为：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
