vue过滤器(filter)的使用

简介: vue过滤器(filter)的使用

过滤器分全局过滤器和局部过滤器


<div id="app">
    <p>电脑价格:{{price | addPriceIcon}}</p>
</div>
<script>
 let vm = new Vue({
    el:"#app",
    data:{
        price:200
    },
    filters:{
        //处理函数
        addPriceIcon(value){
            console.log(value)//200
            return '¥' + value
        }
    }
 })


上边代码,


我的需求是想把价格前面加上人民币符号(¥),


模板中文本后边需要添加管道符号( | )作为分隔,管道符 | 后边是文本的处理函数,


处理函数的第一个参数是:管道符前边的——文本内容,(注意)


如果处理函数上边传递参数,则从第二个参数依次往后是传递的参数。(注意)


可能有人会问:你手动加上去不就得了!如果页面有上千个价格需要添加,


怎么办?几十个页面需要添加怎么办呢,手动加能累晕!所以这种通用机制很重要。


全局过滤器


<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
    Vue.filter("addNamePrefix",(value)=>{
        return "my name is" + value
    })
    let vm = new Vue({
        el:"#app",
        data:{
            viewContent:"吕星辰" 
        }
    })


上边代码,全局过滤器,


参数一:是过滤器的名字,也就是管道符后边的处理函数;


参数二:处理函数,处理函数的参数同上。。。


相关文章
|
18天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
20天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
21天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
24 1
vue学习第一章
|
18天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
19 1
|
18天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
26 1
|
18天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
18天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 前端开发
重读vue电商网站41之自定义格式化时间的全局过滤器
重读vue电商网站41之自定义格式化时间的全局过滤器
115 0
重读vue电商网站41之自定义格式化时间的全局过滤器
|
前端开发 JavaScript
Vue自定义过滤器
在进行前端开发时,我们难免需要进行一些数据的特定处理,因此我们只需在main.js中定义过滤器,即可多次使用。
|
JSON JavaScript 数据格式