• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 1126|回復: 0
      上一主題 下一主題

      vue定義私有過濾器和基本使用

      80572

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-12-02 07:04 | 只看該作者 | 倒序瀏覽
      私有過濾器和全局過濾器的方法和概念都相同,只是一個是全局都可以調用,而私有的只有自己可以調用,
      全局過濾器點這里全局過濾器 使用方法也和全局過濾器一致,只是定義的地方不同 全局過濾器是在 script 中 通過Vue.filter 定義 私有過濾器定義方法:
      <script>
              let vm = new Vue({
                  el:'#app',
                  data:{
                  
                  },
                  filters: { // 當前實例私有的過濾器
      
                  }
              })
          </script>
      vm實列中,有和 data 同級的 filters,用來定義當前實例的私有過濾器
          <div id="app">
              <p>{{mes | addStr}}</p>
          </div>
      
          <script src="./js/vue.js"></script>
          <script>
              let vm = new Vue({
                  el:'#app',
                  data:{
                      mes:"我是一個悲觀的人,悲觀的人做悲觀的事"
                  },
                  filters: { // 當前實例私有的過濾器
                      addStr(data,str="開心"){
                          return data.replace(/悲觀/g,str)
                      }
                  }
              })
          </script>
      輸出結果為: 如果頁面中 有第二個實例,vm2,去調用 vm 中的過濾器,是調用不到的 如果在頁面上有一個全局過濾器,和私有過濾器,是可以同時調用的
      <div id="app">
              <p>{{mes | setStr | addStr}}</p>
          </div>
      
          <script src="./js/vue.js"></script>
          <script>
      
              Vue.filter('setStr',function(data){
                  return data+'我是全局過濾器'
              })
      
              let vm = new Vue({
                  el:'#app',
                  data:{
                      mes:"我是一個悲觀的人,悲觀的人做悲觀的事"
                  },
                  filters: { // 當前實例私有的過濾器
                      addStr(data,str="開心"){
                          return data.replace(/悲觀/g,str)
                      }
                  }
              })
          </script>
      輸出結果: 總結: 在調用時我們在前面調用的 全局 ,后面是私有 但輸出結果卻是 私有過濾器先進行處理 所以,當同時調用全局和私有過濾器時,調用規則是誰離的近先輸出誰, 先私有在全局

      到此這篇關于 vue定義私有過濾器和基本使用的文章就介紹到這了,更多相關 vue定義私有過濾器內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!

      來源:http://www.jb51.net/article/229813.htm