千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  應(yīng)聘面試  >  html5面試題  > 計算屬性通常用來干什么

計算屬性通常用來干什么

來源:千鋒教育
發(fā)布人:qyf
時間: 2022-11-16 17:01:54 1668589314

計算屬性通常用來干什么

  一、理解計算屬性的概念,計算屬性的英文是computed,其實很多時候,一些概念從英文對照為中文后,會導(dǎo)致其中一些含義發(fā)生錯位與丟失,我們要想更好的理解computed計算屬性,可以將這個概念分為兩部分來看:

  - 計算 :這里的計算,是有種宏觀的概念,指的是對于數(shù)據(jù)包的一種操作,比如:篩選、過濾、新增、刪除等。 說明computed本身是具有處理數(shù)據(jù)的能力。

  - 屬性:屬性的意思是,一種可以讀取、渲染的數(shù)據(jù),性質(zhì)跟data的作用相似,說明computed最終會給出一個數(shù)據(jù)供頁面渲染使用。 由此,我們可以得出一個結(jié)論: computed計算屬性,負(fù)責(zé)將一些數(shù)據(jù)在其內(nèi)部按照指定邏輯處理后,最終給出處理后的結(jié)果數(shù)據(jù),給到組件、頁面進行渲染使用,可以讓開發(fā)者更加便捷的處理一些動態(tài)變化的數(shù)據(jù)需求。

  二、computed計算屬性的特點

  1. computed內(nèi)部對data做出處理,其處理結(jié)果可以像data一樣,可以直接在頁面中渲染。

  2. computed內(nèi)部邏輯會自動識別到data的變化,從而做出新的操作,得出新的數(shù)據(jù),從而自動更新視圖。

  3. computed處理的數(shù)據(jù)具有緩存的能力,如果data不變,則頁面中調(diào)用的都是computed第一次執(zhí)行時的運算結(jié)果,提高渲染性能。

  三、computed應(yīng)用場景 當(dāng)某個前端已經(jīng)指定的data數(shù)據(jù)包,如果我們渲染前,對其有過濾、篩選等操作需求,就可以使用computed

  1. 字符串翻轉(zhuǎn)的官方案例,就是將一個普通字符串翻轉(zhuǎn)后再渲染到視圖。new Vue({ el:'#app',

  //占地盤 data:{ 'msg':'Hello Vue' //自定義數(shù)據(jù)包 }, computed:{ reMsg(){ //專門用于反轉(zhuǎn)msg的計算屬性 return this.msg.split('').reverse().join('') } } })

  2. 如果一個班級中有很多學(xué)生,每個學(xué)生通過一個對象來表達,現(xiàn)在我們需要根據(jù)學(xué)員成績來進行動態(tài)切換顯示:全部學(xué)員、及格學(xué)員、不及格學(xué)員,這種在本地進行篩選的需求可以快速通過computed實現(xiàn),代碼邏輯大致如下:

  new Vue({ el:'#app', //占地盤 data:{ stu:[ {name:'張三豐',score:100}, {name:'DDK',score:50}, {name:'張翠山',score:60}, {name:'張無忌',score:90}, {name:'PDD',score:45} ], status:0 //0全部 1及格 2不及格 }, computed:{ filterStu(){ let {stu,status} = this // let stu = this.stu // let status = this.status switch (status) {

  case 1: //及格 return stu.filter(item=>{ return item.score>=60 })

  case 2: //不及格 let arr = stu.filter(item=>{ return item.score

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
快速通道