vue过滤器的使用

最新推荐文章于 2024-07-20 18:05:54 发布

艺术就是派大星220

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量74

点赞数 1

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

本文链接：https://blog.csdn.net/Rossbort/article/details/120303986

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

过滤器可以用在两个地方：双花括号插值（小胡子语法）和 v-bind 表达式

{{ message | capitalize }}



<div v-bind:id="rawId | formatId"></div>

案例使用：


<body>
    <div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model='money'>
        <h1>商品价格是{{(money/100).toFixed(2)}}元</h1>
        <h1>商品价格是{{money | qqq | myname}}元</h1>
        <!--   相当于 把 money对应的值传给 qqq ，后又把qqq的返回值再传给myname过滤器，这个位置展示的是 myname 对应回调函数的返回结果   -->
        <!--   qqq ，myname 是我们自己创造的一个全局过滤器   -->
      </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    // Vue 实例之前定义全局过滤器
    //创造了一个全局过滤器 过滤器的名字是qqq 
    Vue.filter('qqq',function(val){
      console.log(val)
      return (val/100).toFixed(2)
    })
    Vue.filter('myname',function(val){
      // val  对应的就是管道符 | 前边的值
      // 这个val  拿到的是 qqq的返回值；
      return ' 太原'+val + '理工 '
    })
    let vm = new Vue({
        el:'#app',
        data:{
            name:"小明",
            money:0
        }
    });
</script>

艺术就是派大星220

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue过滤器的使用

过滤器可以用在两个地方：双花括号插值（小胡子语法）和v-bind表达式{{ message | capitalize }}<div v-bind:id="rawId | formatId"></div>案例使用：<body> <div id="app"> <h1>{{name}}</h1...
复制链接

扫一扫