zoukankan      html  css  js  c++  java
  • VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})

    Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。

    语法

    <!-- 在两个大括号中 -->
    {{ message | capitalize }}
    
    <!-- 在 v-bind 指令中 -->
    <div v-bind:id="rawId | formatId"></div>

    HTML将字符串转为大写

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      {{ message | capitalize}}
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'runoob'
      },
      filters: {
        capitalize: function (value) {
          if (!value) return '';
          value = value.toString();
          return value.toUpperCase();
        }
      }
    })
    </script>
    </body>
    </html>

    效果:

    过滤器可以串联:

    {{ message | filterA | filterB }}


    过滤器是 JavaScript 函数,因此可以接受参数:

    {{ message | filterA('arg1', arg2) }}
  • 相关阅读:
    构建之法阅读笔记05
    第十一周的学习进度条
    第十周的学习进度条
    第九周的学习进度条
    UI分析之石家庄铁道大学官网
    个人工作总结10
    个人工作总结09
    Lua 笔记16
    Lua 笔记15
    Lua 笔记14
  • 原文地址:https://www.cnblogs.com/boonya/p/7090558.html
Copyright © 2011-2022 走看看