快捷導(dǎo)航

Vue中的計(jì)算屬性介紹

更新時(shí)間：2021年12月03日 11:03:03 作者：huxiaoxiao.

這篇文章主要介紹了Vue中的計(jì)算屬性,模板內(nèi)的表達(dá)式,用于簡(jiǎn)單運(yùn)算,但是模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)，更多具體內(nèi)容一起進(jìn)入下面文章學(xué)習(xí)吧,需要的朋友也可以參考一下

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é)果：