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:"吕星辰" 
        }
    })


上边代码,全局过滤器,


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


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


相关文章
|
8天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
37 3
|
2天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
5 0
|
3天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
3天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
14 0
|
3天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
8 0
|
3天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
7 1
|
3天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
35 0
|
3天前
|
JSON JavaScript API
vue项目开发笔记记录(一)
vue项目开发笔记记录
41 0
|
3天前
|
JavaScript
Vue-实现点击空白处隐藏某节点
Vue-实现点击空白处隐藏某节点
10 1
|
3天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
29 1