快捷導(dǎo)航

學(xué)習(xí)vue.js計(jì)算屬性

更新時(shí)間：2016年12月03日 09:32:48 作者：1owrie

這篇文章主要和大家一起學(xué)習(xí)vue.js的計(jì)算屬性，分享一些計(jì)算屬性練習(xí)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

關(guān)于vue.js的計(jì)算屬性練習(xí)代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs計(jì)算屬性</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)方式三 此方法在括號(hào)中沒有方法()-->
<div id="app-3">
<p>原始{{message3}}</p>
<p>反轉(zhuǎn)后{{ reverseMessage3 }}</p>
</div>
<!-- 方法二和方法三的區(qū)別在于methods會(huì)實(shí)時(shí)刷新數(shù)據(jù) 而computed會(huì)在第一次加載后會(huì)產(chǎn)生緩存-->


<!-- Vue.js 提供了一個(gè)方法 $watch ，它用于觀察 Vue 實(shí)例上的數(shù)據(jù)變動(dòng)。當(dāng)一些數(shù)據(jù)需要根據(jù)其它數(shù)據(jù)變化時(shí)， $watch 很誘人 —— 特別是如果你來(lái)自 AngularJS 。不過(guò)，通常更好的辦法是使用計(jì)算屬性而不是一個(gè)命令式的 $watch 回調(diào)。 -->
<div id="app-4">
{{fullName}}
</div>
<!-- 另一種實(shí)現(xiàn)方式-->
<div id="app-5">
{{ fullname }}
</div>
<!-- 計(jì)算屬性可以滿足需求而且書寫簡(jiǎn)便 為什么需要watch?
來(lái)響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)，執(zhí)行異步操作或昂貴操作時(shí)，這是很有用的。 -->

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

Js文件

var app1=new Vue({
el: '#app-1',
data: {
message: 'Hello Ke'
},
})

var app2=new Vue({
el:'#app-2',
data:{
message2:'Hello Hou Hou'
},
methods: {
reverseMessage2: function () {
return this.message2.split('').reverse().join('')
}
}
});
var app3=new Vue({
el:'#app-3',
data:{
message3:'Zhou Er Ke'
},
computed:{
//a computed getter
reverseMessage3:function () {

return this.message3.split('').reverse().join('')
}
}
});
var app4 = new Vue({
el: '#app-4',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
var app5=new Vue({
el:'#app-5',
data:{
firstName: 'Foo',
lastName: 'Bar',
},
computed:{
fullname:function () {
return this.firstName+' '+this.lastName
}
}
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: