zoukankan      html  css  js  c++  java
  • 11 Vue的过滤器filters

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--  数据price和msg通过函数myPrice和myReverse加工,再显示出来      -->
            <h3>{{price | myPrice('$')}}</h3>
            <h3>{{msg | myReverse}}</h3>
        </div>
        <script src="vue.js"></script>
        <script>
            //过滤器  数据通过过滤器,再显示出来
            //需求:为20 添加$

            //创建全局过滤器  目标数据反转
            Vue.filter('myReverse',(val) =>{
                    return val.split('').reverse().join('')
            })

            new Vue({
                el:'#app',
                data:{
                    price:10,
                    msg:'hello'
                },
                //局部过滤器
                filters:{
                    myPrice:function (price,a) {
                        return a + price

                    }
                }
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    tree命令详解
    rm 命令详解
    rename命令详解
    pwd命令详解
    mv命令详解
    mkdir命令详情
    find命令详解
    dockerfile中配置时区
    docker导入导出
    docker上传私有仓库报错
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14202567.html
Copyright © 2011-2022 走看看