溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“Vue中計算屬性有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue中計算屬性有哪些”這篇文章吧。
1、何為計算屬性：大白話講就是計算出來的結果保存在屬性當中，可以想象為緩存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--注意了同志們是currentTime1()，這里有加括號的，是方法調用.-->
<p>currentTime1：{{currentTime1()}}</p>
<!--這里的currentTime1是沒有加括號的，通過屬性進行調用的-->
<p>currentTime2：{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello vue!"
},
methods: {
currentTime1: function () {
// 返回當前時間戳
return Date.now();
}
},
computed: {
/*注意：這里就有計算屬性了：而且methods和computed方法名不能相同。
重名之后只會調用methods方法*/
currentTime2: function () {
this.message;
// 返回當前時間戳
return Date.now();
}
}
});
</script>
</body>
</html>運行結果：
可能咋一看好像沒什么區別呀。
但是我們仔細思考一下，一個是方法，一個是屬性。
如下所示：
<div id="app">
<!--注意了同志們是currentTime1()，這里有加括號的，是方法調用.-->
<p>currentTime1：{{currentTime1()}}</p>
<!--這里的currentTime1是沒有加括號的，通過屬性進行調用的-->
<p>currentTime2：{{currentTime2}}</p>
</div>重點：屬性是存值的，有新的值進來才會改變，不然就跟緩存一樣，我們來看這個：
解釋一下：
1.在1、2當中我們可以看出，一個是方法一個是屬性，屬性用方法來調用肯定是不行的。
2.在1、3當中我們可以看出，方法調用的值一直在變，但是屬性調用的值沒有改變這就跟他是緩存機制一樣
3.在3、4、5當中我們就可以看出，當我們一旦改變了函數當中的值，就相當于改變了緩存中的值，那么他就會刷新值。
以上是“Vue中計算屬性有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
