Vue的方法和屬性案例詳解
vue的方法和屬性
1.方法 methods
用法1
methods:{
方法名:function(){},
}
用法2
methods:{
方法名(){}
}
注意
{{}}調(diào)用要寫()
示例
{{aa()}}
事件觸發(fā)
@click=aa"可以有()也可以沒有如果需要傳參,加上()
把$event這個(gè)特殊參數(shù)傳進(jìn)去可以獲取事件對象
2.計(jì)算屬性
計(jì)算屬性是什么
computed
計(jì)算屬性的特點(diǎn)
- 計(jì)算屬性有緩存
- 計(jì)算屬性是基于他們的依賴進(jìn)行緩存的
- 計(jì)算屬性只有在他的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值當(dāng)
- 計(jì)算屬性所依賴的屬性發(fā)生變化時(shí)他會(huì)重新計(jì)算一次
計(jì)算屬性中的方法
set(da)
get()
示例
computed:{ //計(jì)算屬性 //計(jì)算屬性有緩存 //直接{{}}調(diào)用不用寫() //當(dāng)計(jì)算屬性所依賴的屬性發(fā)生變化時(shí)他會(huì)重新計(jì)算一次 bb(){ return this.arr.filter(a=>a.indexOf(this.search) > -1) }, cc:{ //調(diào)用計(jì)算屬性時(shí)自動(dòng)觸發(fā)get方法,修改計(jì)算屬性時(shí)自動(dòng)觸發(fā)set方法 set(a){ console.log('我是set'+"接收的內(nèi)容"+a+"接收的內(nèi)容") }, get(){ console.log('我是get') return this.arr.filter(a=>a.indexOf(this.search) > -1) } } },
到此這篇關(guān)于Vue的方法和屬性案例詳解的文章就介紹到這了,更多相關(guān)Vue的方法和屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3使用ref獲取dom結(jié)果為'null'的原因詳析
這篇文章主要給大家介紹了關(guān)于vue3使用ref獲取dom結(jié)果為'null'的原因詳析,ref是Vue3中一個(gè)非常重要的功能,它可以用來獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對DOM節(jié)點(diǎn)的操作,需要的朋友可以參考下2023-07-07使用Vue和React分別實(shí)現(xiàn)錨點(diǎn)定位功能
這篇文章主要為大家詳細(xì)介紹了如何使用Vue和React分別實(shí)現(xiàn)錨點(diǎn)定位功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下2024-01-01vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決
這篇文章主要介紹了vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07一步步教你用Vue.js創(chuàng)建一個(gè)組件(附代碼示例)
組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于如何一步步用Vue.js創(chuàng)建一個(gè)組件的相關(guān)資料,需要的朋友可以參考下2022-12-12