vue过滤器

最新推荐文章于 2024-07-04 10:07:27 发布

吕招焕

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量86

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/u011090104/article/details/104553445

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文深入探讨Vue.js框架中的过滤器概念，包括如何创建和使用过滤器，以及它们在数据绑定和视图渲染中的作用。通过实例，展示了过滤器在实际开发中的应用。

摘要由CSDN通过智能技术生成

过滤器

	//全局过滤器
	 Vue.filter('reverseStr',function(value,arg){
            return arg+' '+value.split('').reverse().join('');
     });
	{{data | filtersName}}
        var App ={
            data(){
                return{
                    money:0,
                    msg:'yun yan tao yuan'
                }
            },
            template:`
                <div>
                    <input type='number' v-model='money'>
                    <h3>{{money | changeMoney}}</h3>
                    <h3>{{msg | reverseStr('love')}}</h3>
                </div>
            `,
            //局部过滤器
            filters:{
                changeMoney:function(value){
                    return "¥"+ value;
                }
            }
        };
        new Vue({
            el:'#app',
            components:{
                App
            },
            template:`<App />`
        });