vue的計算屬性和監聽事件

2022-05-19 22:21:46 字數 1741 閱讀 4574

每個計算屬性都包括乙個setter和乙個getter,但是setter方法並不常用,所以可以簡寫,沒有setter方法就只能讀取,無法修改

data: ,

computed: ,

//包含了setter方法

set(name) ,

},//省略了setter方法的簡寫

getfullname2: function () ,

},});

執行結果:

methods和computed都可以實現同樣的功能,但是計算屬性可以快取,例如使用camputed渲染四次,但是控制台只會列印一下,但是使用methods渲染四次,控制台就會列印四次

data: ,

computed: ,

},methods: ,

},});

執行結果:

按鈕1按鈕1

按鈕2按鈕3

按鈕4data: ,

methods:,

btn2click(event),

btn3click(abc,event)

}});

執行結果:

v-if是通過將整個元素刪除達到隱藏的效果,v-show是通過display屬性達到隱藏的效果

});按鈕

data: ,

methods:

}});

var沒有塊級作用域,會導致一些問題,let是var的完善版,有塊級作用域;

案例中btn1,不管點選哪個,都是顯示點選最後乙個,因為var定義的i沒有塊級作用域,它會隨著for迴圈的改變而改變,最後讀取到的都是最後乙個i;btn2中,點選哪個就是顯示對應的下標,

按鈕2按鈕3

按鈕4data: ,

methods: ;}},

});執行結果:

按鈕2按鈕3

按鈕4data: ,

methods: ;}},

},});

執行結果:

因為vue在進行dom的渲染時,出於效能考慮,會盡可能的復用已經存在的元素,而不是建立新的元素

解決:新增key,當key相同表示可以復用,不同不可以復用

Vue 事件監聽(事件監聽 修飾符)

1 v on 1 v on的基本使用 increment 加 decrement 減 vue methods decrement 2 語法糖 increment 加 decrement 減 在事件監聽的時候,如果函式沒有引數就可以將小括號省略掉 3 傳遞引數 cli 123 點選 點選 當方法需要傳...

vue中的監聽事件(watch)

html 在html裡寫下那個事件會讓觸發methods讓data發生變化 text v model firstname keyup getfullname data 這裡是data裡面的值 data methods 這裡是讓data資料改變的方法 getfullname function watc...

vue 監聽螢幕變化 銷毀監聽事件

記一次小坑.由於用到 echarts 需要自適應螢幕,所以在vue中用了監聽事件並且考慮到效能問題,所以用lodash 庫的 debounce 做了包裹.如下 mounted beforedestroy methods 然而發現切換到其他的頁面的時候,螢幕改變的時候還是會觸發 resize 事件,因...