Vue的方法和屬性案例詳解
更新時(shí)間：2021年07月29日 10:07:50 作者：stay_少年與夢(mèng)
這篇文章主要介紹了Vue的方法和屬性案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
vue的方法和屬性
1.方法 methods
用法1
methods：{
方法名：function（）{}，
}
用法2
methods：{
方法名（）{}
}
注意
{{}}調(diào)用要寫（）
示例
{{aa()}}
事件觸發(fā)
@click=aa"可以有（）也可以沒有如果需要傳參，加上（）
把$event這個(gè)特殊參數(shù)傳進(jìn)去可以獲取事件對(duì)象
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用VUE3開發(fā)很久了,但一直沒進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目搭建的詳細(xì)過程,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了在Vue 中使用Typescript的示例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
手把手教你拿捏vue?cale()計(jì)算函數(shù)使用
這篇文章手把手教你拿捏vue?cale()計(jì)算函數(shù)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-02-02
vue組件文檔（.md）中如何自動(dòng)導(dǎo)入示例（.vue）詳解
這篇文章主要給大家介紹了關(guān)于vue組件文檔（.md）中如何自動(dòng)導(dǎo)入示例（.vue）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Vue入門之?dāng)?shù)據(jù)綁定(小結(jié))
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue前端實(shí)現(xiàn)驗(yàn)證碼登錄功能
這篇文章主要介紹了vue前端實(shí)現(xiàn)驗(yàn)證碼登錄功能,登錄時(shí)圖形驗(yàn)證通過三種方法結(jié)合實(shí)例代碼給大家講解的非常詳細(xì), 通過實(shí)例代碼介紹了vue登錄時(shí)圖形驗(yàn)證碼功能的實(shí)現(xiàn),感興趣的朋友一起看看吧2023-12-12
el-select自定義指令實(shí)現(xiàn)觸底加載分頁請(qǐng)求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請(qǐng)求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實(shí)現(xiàn)觸底加載分頁請(qǐng)求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧2024-02-02
淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期
下面小編就為大家?guī)硪黄獪\談Vue.js 1.x 和 2.x 實(shí)例的生命周期。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07