16_过滤器(filter)

1)过滤器可以直接在计算属性中使用,不收区域影响
2)计算属性本质上是依赖watcher,只要对应的watcher被调用,则该计算属性的方法就会重新调用一次
3)计算属性不能反向修改原始数据,而且计算属性中不能有异步操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="msg"/>
            <p>{{msg|upperCase}}</p>
            <p>{{upperMsg}}</p>
            <p v-bind="msg"></p>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vm= new Vue({
                el:"#app",
                data:{
                    msg:"hello"
                },
                //定义过滤器
                filters:{
                    upperCase(val){
                        //参数是待处理的数据
                        return val.toUpperCase();
                    }
                },
                //过滤器可以直接在计算属性中使用,不收区域影响
                //计算属性本质上是依赖watcher,只要对应的watcher被调用,则该计算属性的方法就会重新调用一次
                //计算属性不能反向修改原始数据,而且计算属性中不能有异步操作
                computed:{
                    upperMsg(){
                        return this.msg.toUpperCase()
                    }
                }
                
            })
        </script>
    </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • AngularJS中的过滤器 filter使用,在 搜索中 使用非常广泛
    小草莓蹦蹦跳阅读 1,009评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,280评论 19 139
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,814评论 4 129
  • 上周五弟弟眼睛做手术,我特地带着孩子一起回去陪他,孩子虽比他舅舅小,却也跑前跑后没有怨言的一路跟着到医院,热的满头...
    微微一笑心理咨询师阅读 1,868评论 0 0
  • 让我掉下眼泪的 不止是昨天的分儿 让我依依不舍的 不止你的笑容 余路还要走多久 你望着我的眼 让我感到为难的 是分...
    白羽墨画阅读 3,474评论 0 0

友情链接更多精彩内容