<em id="bnjfz"><form id="bnjfz"></form></em>

                  千鋒教育-做有情懷、有良心、有品質的職業教育機構

                  當前位置:首頁  >  IT問答庫  >  Web培訓課程

                  web前端課程關于vue過濾器的那點事

                  發布:web前端培訓 2022-02-09 16:41

                  前端開發關于vue過濾器的那點事

                  推薦答案

                    web前端課程關于vue過濾器的那點事,關于vue的過濾器,其實在vue1.0的時候是內置了過濾器的,但是自從到了2.0之后就被去掉了,但是我們可能還會使用到,所以就需要自己定義過濾器了,下面就帶你了解一下如何定義過濾器和過濾器都有哪些種類。

                  HTML5

                   

                    vue 過濾器分類

                    過濾器分為兩種,一種是局部過濾器,一種全局過濾器。所有的過濾器都是函數,并且參數為要過濾的數據。

                    局部過濾器:只允許在當前組件中使用
                  全局過濾器:所有組件都可以使用

                  1) 局部過濾器

                  // 創建 Vue 實例,得到 ViewModel

                      var vm = new Vue({

                          el: '#app',

                          data: {

                              msg: 'filter'

                          },

                          methods: {},

                          //定義私用局部過濾器。只能在當前 vue 對象中使用

                          filters: {

                              dataFormat(msg) {

                                  return msg+'xxxxx';

                              }

                          }

                      });

                  以上代碼 filters 這個對象定義的就是局部過濾器,下面代碼展示在組建中如何使用過濾器:

                  <div id="app">

                              <p>{{ msg | dataFormat}}</p>

                              // 結果   filterxxxxx

                      </div>

                  當然你也應該在想,這樣的過濾器使用起來可能會比較笨重,不夠靈活,過濾器既然是函數,那是否可以傳參呢?接下來我們通過參數讓過濾器的使用變得更加靈活。

                  // 創建 Vue 實例,得到 ViewModel

                      var vm = new Vue({

                          el: '#app',

                          data: {

                              msg: 'filter'

                          },

                          methods: {},

                          //定義私用局部過濾器。只能在當前 vue 對象中使用

                          filters: {

                              // msg表示要過濾的數據

                              // a表示傳入的參數

                              dataFormat(msg,a) {

                                  return msg+a;

                              }

                          }

                      });

                      <!--html部分-->

                       <div id="app">

                              <p>{{ msg | dataFormat("你好")}}</p>

                              <!--結果   <p>filter你好</p>-->

                      </div>

                  2) 全局過濾器

                  <script>

                          // 定義一個 Vue 全局的過濾器,名字叫做  toDouble 補零

                          Vue.filter('toDouble', function(msg) {

                              // 字符串的  replace 方法,第一個參數,除了可寫一個 字符串之外,還可以定義一個正則

                              return msg < 10 ? msg : "0" +msg

                           })

                      </script>

                   

                      <!-- html // -->

                   

                      <div> {{ 9 | toDouble }} </div>

                      <!-- // 結果 <div>09</div> -->

                  總結

                  全局的過濾器要比局部過濾器使用的更廣泛一些,說白了我們為什么要使用過濾器,其實就跟使用函數是一樣,我們想把一些方法封裝,供其它組件使用,這樣調用起來方便,開發更快捷。

                  注意: 如果全局過濾器和局部過濾器名字重復,我們會按照遠近使用,優先級 : 局部>全局

                  過濾器并不是只可以使用一個,一個數據可以用多個過濾器,從左向右執行,注意的下一個過濾器接收的是上一個過濾器的處理結果,因此千萬要注意使用順序。

                  更多問題在線答疑

                  專業導師線上坐鎮
                  解答個性化學習難題

                  點擊提交問題
                  問答排行榜

                  01 網絡安全發展前景怎么樣

                  網絡安全培訓 網絡安全培訓班 網絡安全培訓機構
                  6020 人關注

                  02 大數據培訓機構哪些比較好

                  大數據培訓 大數據培訓班 大數據培訓機構
                  5389 人關注

                  03 大數據培訓分享:大數據分析的數據類型都有哪些

                  大數據培訓 大數據培訓班 大數據培訓機構
                  5062 人關注

                  04 網絡安全培訓分享:加密軟件該如何進行安全防護?

                  網絡安全培訓 網絡安全培訓班 網絡安全培訓機構
                  4733 人關注

                  05 大數據之Spark框架中RDD和DataFrame的區別

                  大數據培訓 大數據培訓班 大數據培訓機構
                  4561 人關注

                  06 如何進入大數據行業?相關學習路線是什么

                  大數據培訓 大數據培訓班 大數據培訓機構
                  4238 人關注

                  相關問題

                  web前端開發需要學習哪些課程

                  Javascript函數優先的輕量級解釋型或及時編譯型編程語言:被廣泛...

                  web前端課程關于vue過濾器的那點事

                    web前端課程關于vue過濾器的那點事,關于vue的過濾器,其實...

                  怎么才能學好web前端?

                    Web前端是一個入行門檻較低的開發技術,但更是近幾年熱門的...

                  web前端培訓課程學習內容是什么?

                  web前端培訓課程學習內容是什么?因為工作原因,經常關...

                  Web前端培訓課程都能學到些什么?

                  Web前端培訓課程都能學到些什么?幾乎每個互聯網企業都需...

                  Web前端培訓課程大綱分享!

                  近幾年IT業可謂是發展火熱,而且新生了很多的職業。例如...

                  IT趣味問答挑戰賽

                  測一測
                  你知道多少IT梗

                  国内免费视频青女在线

                  <em id="bnjfz"><form id="bnjfz"></form></em>