計算屬性

計算屬性

實現倒敘：

<h1>{{name.split('').reverse().join('')}}</h1> <h1>{{reverse()}}</h1> <h1>{{name | res(1, 2, 3, 4)}}</h1> <h2>{{name2}}</h2> 

{{name.split('').reverse().join('')}}

methods: {
        reverse(){
            return this.name.split('').reverse().join(''); } }, 

filters: {
        res(val,n1,n2,n3,n4){
            return val.split('').reverse().join(''); } } 

只要name不發生變化，本函數就永遠不會執行； DOM模板中使用的一直都是name2的緩存值 name2徹底依賴於name

computed: {
        //計算屬性 name2(){ //簡寫方式 return this.name.split('').reverse().join(''); } } 

只要函數用某些變量，那麼計算屬性就用這些變量

name5: {
        //全寫的內容：有一個get函數和set函數 //簡寫只至關於一個get函數 //這兩個函數，能夠只寫一個get,但不能只寫一個set get(){ console.log('get'); return this.name;//get的return值就是name5的值 }, set(val){ console.log(val,'set');//val就是設置給name5的內容 } } 

有一個缺點

computed:{
        name2(){
            //不支持異步;卸載異步函數中的變量 跟 name2 不存在依賴關係 setTimeout(()=>{ this.str = this.name + 'computed'; },0) console.log(this.name); } } 

watch

• 性能沒有computed高
• 可以使用異步

v-if

決定該標籤是否要加載 會引起重繪

<h1 v-if="isShow == 1">顯示標籤</h1> <h2 v-else-if="isShow == 2">標籤2</h2> <h2 v-else>v-else</h2> 

顯示哪一個標籤看isShow屬性的值 v-if v-else v-else-if 用的時候須要緊挨着，中間不能摻雜不相干的元素

v-show

決定元素是否隱藏 只能引起迴流

<h3 v-show="0">v___show</h3> 

至關於

<h3 style="display: none;">v___show</h3>