Vue全局过滤器filter、局部过滤器filters的使用

最新推荐文章于 2022-06-17 17:43:40 发布

每一天，每一步

最新推荐文章于 2022-06-17 17:43:40 发布

阅读量138

点赞数

分类专栏： Vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/u010234868/article/details/120079516

版权

Vue 专栏收录该内容

122 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      // 全局过滤器
      Vue.filter('myReverse', function (value, arg) {
        return arg + ' ' + value.split('').reverse().join('');
      });
      var App = {
        data() {
          return {
            price: 0,
            msg: 'hello'
          };
        },
        template: `
                <div>
                    <input type="number" v-model="price" />
                    <p>{{price | currency}}</p>
                    <p>{{msg | myReverse('Vue')}}</p>
                </div>
            `,
        filters: {
          // 声明局部过滤器  // 使用 {{数据 | 过滤器名字}}
          currency: function (value) {
            return '￥' + value;
          }
        }
      };
      new Vue({
        el: '#app',
        data: {},
        components: {
          App
        },
        template: `
                <App />
            `
      });
    </script>
  </body>
</html>

每一天，每一步

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue全局过滤器filter、局部过滤器filters的使用

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> &l.
复制链接

扫一扫