Vue中的計(jì)算屬性介紹
1、什么是計(jì)算屬性
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。
例如：
<div id="app">
{
<!-- -->{ message.split('').reverse().join('') }}
</div>
在這個(gè)地方，模板不再是簡(jiǎn)單的聲明式邏輯。而是在插值表達(dá)式中直接反轉(zhuǎn)字符串，如果你在多處用到該反轉(zhuǎn)字符串時(shí)，這樣寫就會(huì)很麻煩，增加消耗。所以，對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用 計(jì)算屬性 。
2.計(jì)算屬性的語(yǔ)法
computed{
函數(shù)（）{return //必須又返回值。}通常該函數(shù)為get函數(shù)
}
3.舉例
針對(duì)上面這個(gè)例子，我們可以這樣寫：
<div id="app">
<p>原來(lái)的字符串：{
<!-- -->{mes}}</p>
<p>反轉(zhuǎn)后的字符串：{
<!-- -->{reverseMes}}</p>
</div>
let vm = new Vue({
el:'#app',
data:{
mes:'sayhello'
},
computed: {
reverseMes(){
// 計(jì)算屬性中一定要有返回值
return this.mes.split('').reverse().join('')
}
}
})
查看結(jié)果：
這里我們?cè)?code>vue實(shí)例的 computed 計(jì)算屬性中 定義了一個(gè)函數(shù)，函數(shù)的返回值就是我們需要得到的結(jié)果，可以直接在插值表達(dá)式中調(diào)用，并渲染出來(lái)
在舉個(gè)例子，通過(guò)計(jì)算屬性，讓單詞的首字母變大寫：
<div id="app">
<p>原字符串：{
<!-- -->{name}}</p>
<p>首字母大寫：{
<!-- -->{toUpperCase}}</p>
</div>
在vue實(shí)例的 computed計(jì)算屬性中，自定義我們的計(jì)算屬性，通過(guò)獲取到字符串第一個(gè)字符并把他轉(zhuǎn)為大寫，在和拆分后的剩余字符連接：
el:"#app",
data:{
name:'tom'
},
// 計(jì)算屬性
computed:{
// 自定義 計(jì)算屬性
toUpperCase(){
return this.name.charAt(0).toUpperCase().concat(this.name.slice(1,3))
}
}
輸出結(jié)果為：
計(jì)算屬性還有兩個(gè)很實(shí)用的小技巧容易被忽略： 一是計(jì)算屬性可以依賴其他計(jì)算屬性;? 二是計(jì)算屬性不僅可以依賴當(dāng)前Vue 實(shí)例的數(shù)據(jù)，還可以依賴其他實(shí)例的數(shù)據(jù)，
例如：
<div id="app1"></div>
<div id="app2">
{
<!-- -->{reverseMes}}
</div>
let vm1 = new Vue({
el:'#app1',
data:{
mes:'hello'
}
})
let vm2 = new Vue({
el:'#app2',
computed: {
reverseMes(){
// 使用實(shí)例 vm1中的data數(shù)據(jù)中心的 mes 去做反轉(zhuǎn)字符串的操作
return vm1.mes.split('').reverse().join('')
}
}
})
查看結(jié)果：
實(shí)例vm1中的數(shù)據(jù)，vm2計(jì)算屬性也可以使用
自定義的計(jì)算屬性除了可以在插值表達(dá)式中使用，還可以在 v-bind: 屬性綁定中使用，用來(lái)做一些樣式的變換等等。
到此這篇關(guān)于Vue中的計(jì)算屬性介紹的文章就介紹到這了,更多相關(guān)Vue 計(jì)算屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁(yè)面實(shí)現(xiàn)代碼
在商場(chǎng)大家經(jīng)常看到停車收費(fèi)倒計(jì)時(shí)支付頁(yè)面,今天小編通過(guò)本文給大家分享vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁(yè)面功能,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue頭像處理方案，實(shí)現(xiàn)思路主要是通過(guò)獲取后臺(tái)返回頭像url，判斷圖片寬度，高度。具體實(shí)例代碼大家參考下本文2018-07-07
這篇文章主要介紹了詳解如何理解vue的key屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式
這篇文章主要介紹了el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue props實(shí)現(xiàn)父組件給子組件傳遞數(shù)據(jù)的方式
Vue中的配置項(xiàng)Props能讓組件接收外部傳遞過(guò)來(lái)的數(shù)據(jù),本文給大家介紹了Vue props實(shí)現(xiàn)父組件給子組件傳遞數(shù)據(jù)的幾種方式,文中有詳細(xì)的實(shí)現(xiàn)方式,具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了vue-resource 攔截器使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要介紹了vuex Module將 store 分割成模塊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
在開(kāi)發(fā)Vue應(yīng)用時(shí),我們經(jīng)常需要在多個(gè)組件中復(fù)用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫的工具函數(shù),也可能是從第三方庫(kù)中導(dǎo)入的,下面我們就來(lái)看看如何正確引用和使用外部方法吧2024-01-01
這篇文章主要介紹了vue多個(gè)元素的樣式選擇器問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11