abstrakt：關(guān)于vue.js的計算屬性練習(xí)代碼，供大家參考，具體內(nèi)容如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs計算屬性</title> </head&g
關(guān)于vue.js的計算屬性練習(xí)代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs計算屬性</title>
</head>
<body>
<!-- 字母反轉(zhuǎn)方式一：不推薦
-->
<div id="app-1">
{{ message.split('').reverse().join('') }}
</div>
<!-- 字母反轉(zhuǎn)方式二
-->
<div id="app-2">
{{ message2 }}
<!-- 注意{}內(nèi)的內(nèi)容如果是方法要加()
-->
<p>反轉(zhuǎn)后的內(nèi)容{{ reverseMessage2() }}</p>
</div>
<!-- 字母反轉(zhuǎn)方式三 此方法在括號中沒有方法()-->
<div id="app-3">
<p>原始{{message3}}</p>
<p>反轉(zhuǎn)后{{ reverseMessage3 }}</p>
</div>
<!-- 方法二和方法三的區(qū)別在于methods會實(shí)時刷新數(shù)據(jù) 而computed會在第一次加載后會產(chǎn)生緩存-->
<!-- Vue.js 提供了一個方法 $watch ，它用于觀察 Vue 實(shí)例上的數(shù)據(jù)變動。當(dāng)一些數(shù)據(jù)需要根據(jù)其它數(shù)據(jù)變化時， $watch 很誘人 —— 特別是如果你來自 AngularJS 。不過，通常更好的辦法是使用計算屬性而不是一個命令式的 $watch 回調(diào)。 -->
<div id="app-4">
{{fullName}}
</div>
<!-- 另一種實(shí)現(xiàn)方式-->
<div id="app-5">
{{ fullname }}
</div>
<!-- 計算屬性可以滿足需求而且書寫簡便 為什么需要watch?
來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時，執(zhí)行異步操作或昂貴操作時，這是很有用的。 -->
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>更多關(guān)于學(xué)習(xí)vue.js計算屬性請關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其它文章！