suchen

Heim  >  Artikel  >  Web-Frontend  >  Einführung in die Verwendung von vue.filter() in Vue (Filterung)

Einführung in die Verwendung von vue.filter() in Vue (Filterung)

不言
不言Original
2018-08-16 10:08:509446Durchsuche

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von vue.filter () in Vue (Filterung). Ich hoffe, dass er für Freunde hilfreich ist.

Vue-Filter

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <p id="app">
            <h1>{{msg |msgFormat}}</h1>
        </p>
    </body>
    <script>
        Vue.filter('msgFormat',function(msg){
            return msg.replace(/学习/g,'讨论');
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"我是一个爱学习的人，学习各种技术"
            }
        })
    </script>
</html>

Verwenden Sie Vue.filter(), um das angegebene Element zu filtern. Der in der Funktion übergebene Parameter ist der erste Wert im el-Ausdruck,

Sie können Übergeben Sie auch mehrere Parameter gleichzeitig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <p id="app">
            <h1>{{msg |msgFormat('讨论')}}</h1>
        </p>
    </body>
    <script>
        Vue.filter('msgFormat',function(msg,arg){
            return msg.replace(/学习/g,arg);
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"我是一个爱学习的人，学习各种技术"
            }
        })
    </script>
</html>

Sie können mehrere Male gleichzeitig filtern

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <p id="app">
            <h1>{{msg |msgFormat('讨论')|test}}</h1>
        </p>
    </body>
    <script>
        Vue.filter('msgFormat',function(msg,arg){
            return msg.replace(/学习/g,arg);
        })
        Vue.filter('test',function(msg){
            return msg+'=====';
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"我是一个爱学习的人，学习各种技术"
            }
        })
    </script>
</html>

Instanzen, die in der Praxis häufig verwendet werden

  Vue.filter('dateFormat', function (dateStr, pattern = "") {
      // 根据给定的时间字符串，得到特定的时间
      var dt = new Date(dateStr)

      //   yyyy-mm-dd
      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()

      // return y + '-' + m + '-' + d



      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`
      } else {
        var hh = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
    })

Gleichzeitig Wenn zwei Vue-Objekte vorhanden sind, können für jedes Objekt private Filter wie folgt definiert werden

    // 如何自定义一个私有的过滤器（局部）
    var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {},
      filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
        // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
        dateFormat: function (dateStr, pattern = '') {
          // 根据给定的时间字符串，得到特定的时间
          var dt = new Date(dateStr)

          //   yyyy-mm-dd
          var y = dt.getFullYear()
          var m = (dt.getMonth() + 1).toString().padStart(2, '0')
          var d = dt.getDate().toString().padStart(2, '0')

          if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
          } else {
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')

            return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
          }
        }
      },

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung von Vue-Filtern

$.grep() Filterfunktion Array-Filterung in jQuery

Detaillierte Beispiele zum Erstellen und Verwenden benutzerdefinierter Vue-Filter

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von vue.filter() in Vue (Filterung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery Filter function 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist die Funktionsfunktion von js? So verwenden Sie eine Funktion in jsNächster Artikel：Was ist die Funktionsfunktion von js? So verwenden Sie eine Funktion in js

In Verbindung stehende Artikel

Mehr sehen