一、計算屬性

模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

<div>
    {{ message.split(‘‘).reverse().join(‘‘) }}
</div>

在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這裏是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。

所以，對於任何復雜邏輯，你都應當使用計算屬性。

<div id = ‘com‘>
        <h3>{{msg}}</h3>
        <p>{{currentMsg}}</p>
        <button @click=‘clickHandler‘>更改</button>
</div>

var com = new Vue({
            el:‘#com‘,
            data:{
                msg:‘學習computed‘
            },
            methods:{
                clickHandler(){
                    this.msg = ‘我更改了數據‘
                }

            },
            computed:{
                currentMsg(){
                    // computed方法中默認只有getter

                    return this.msg
                 }
            }
        })

computed是計算屬性,vue會一直監聽著裏面的變量,如果你的變量發生了變化,computed會立刻執行getter方法

重新渲染到頁面上.

這也是vue的核心思想數據驅動視圖

計算屬性默認只有getter,當然如果你需要也可以設置setter

var com = new Vue({
            el:‘#com‘,
            data:{
                msg:‘學習computed‘
            },
            methods:{
                clickHandler(){
                    this.currentMsg = ‘我更改了數據‘
                }
            },
            computed:{
                currentMsg:{
                   set : function(newValue){
                      this.msg = newValue;
                   },
                   get : function(){
                     return this.msg;
                   }
                 }       
            }
        })

示例一:輪播圖:

<div id="app">
    <div>
        <img :src="currentImg"  @mouseenter="stoplunbo()" @mouseleave="startlunbo()">
        <ul>
            <li v-for="(item,index) in ImgAttr" @click="liChangeImg(item)">{{index+1}}</li>
        </ul>
    </div>
    <button @click="nextImg()">下一張</button>
    <button @click="prevImg()">上一張</button>

</div>

var app = new Vue({
        el:‘#app‘,
        //所有的數據都放在數據屬性裏
        data:{
            currentNum:0,
            currentImg:‘./1.jpg‘,
            str:‘<p>哈哈哈</p>‘,
            ImgAttr:[
                {id:1,src:‘./1.jpg‘},
                {id:2,src:‘./2.jpg‘},
                {id:3,src:‘./3.jpg‘},
                {id:4,src:‘./4.jpg‘}
            ],
            Timer:null,

        },
        created(){
            this.Timer = setInterval(this.nextImg,2000)
        },
        methods:{
            //單體模式
            clickHandler(){
                //this 就是app實例化對象
                this.show=!this.show;
            },
            ChangeColor(){
                this.isRed=!this.isRed;
            },
            nextImg(){
                if (this.currentNum==this.ImgAttr.length-1 ){
                    this.currentNum=-1;
                }
                this.currentNum++;
                this.currentImg=this.ImgAttr[this.currentNum].src;
            },
            liChangeImg(item){

                this.currentNum=item.id-1;
                this.currentImg=item.src;
            },
            stoplunbo(){
                clearInterval(this.Timer);
            },
            startlunbo(){
            this.Timer = setInterval(this.nextImg,2000)
            },
            prevImg(){
                if (this.currentNum == 0){
                    this.currentNum=this.ImgAttr.length-1;
                }
                this.currentNum--;
                this.currentImg=this.ImgAttr[this.currentNum].src;

            }
        }
    })

當然這裏沒有用到計算屬性,如果用到了計算屬性,也可以進行優化:

示例二:

<div id="app">
    <div>{{showli}}</div>
    <ul>
        <li v-for="(item,index) in songs" @click="changename(index)">
            <p>name:{{item.name}} author:{{item.author}}</p>
        </li>
    </ul>
    <button @click="additem()">additem</button>
</div>

<script>
    var songs=[
        {‘id‘:1,‘src‘:‘1.mp3‘,‘author‘:‘chen1‘,‘name‘:‘桃花朵朵開1‘},
        {‘id‘:2,‘src‘:‘2.mp3‘,‘author‘:‘chen2‘,‘name‘:‘桃花朵朵開2‘},
        {‘id‘:3,‘src‘:‘3.mp3‘,‘author‘:‘chen3‘,‘name‘:‘桃花朵朵開3‘},
        {‘id‘:4,‘src‘:‘4.mp3‘,‘author‘:‘chen4‘,‘name‘:‘桃花朵朵開4‘}
    ];


    var app=new Vue({
        el:‘#app‘,
        data:{
            songs:songs,
            currentIndex:0,
        },
        methods:{
            changename(index){
                this.currentIndex=index;
            },
            additem(){
                this.songs.push({‘id‘:5,‘src‘:‘5.mp3‘,‘author‘:‘chen5‘,‘name‘:‘桃花朵朵開5‘})
            }
        },
        computed:{
            showli(){
                return this.songs[this.currentIndex].name
            }
        }
    })
</script>

這裏需要說的是,在computed裏面的變量,如果發生了改變,那麽就會執行相應的getter,在驅動視圖的改變.

vue計算屬性