Vue.js学习系列（二十七）-- 计算属性（一）
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
在模板中表達式非常便利，但是它們實際上只用于簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么?Vue.js?將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應當使用計算屬性。計算屬性關鍵詞:?computed。計算屬性在處理一些復雜邏輯時是很有用的。
我們來看一個例子，先不使用計算屬性
實現(xiàn)將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>
運行結果為：
?
?
轉載于:https://my.oschina.net/u/2971691/blog/860620
總結
以上是生活随笔為你收集整理的Vue.js学习系列（二十七）-- 计算属性（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【PHP】Sublime下PHP网站开发
- 下一篇： html5倒计时秒杀怎么做,vue 设