Vue.js学习系列(二十七)-- 计算属性(一)

原创
2017/03/16 14:32
阅读数 49

在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 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>

运行结果为:

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部