## 第十四节:带你梳理Vue2:filters过滤器

### 1. 通过案例理解过滤器

#### 1.1 Mastache语法中处理价格数字

``````<div id="app"><!-- 正常处理 --><p>苹果价格:{{ (priceOne/100).toFixed(2) }} 元/斤</p><p>梨子价格:{{ (priceTwo/100).toFixed(2) }} 元/斤</p><p>香蕉价格:{{ (priceThree/100).toFixed(2) }} 元/斤</p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,}})
</script>
``````

#### 1.2 方法处理相同逻辑

``````<div id="app"><!--  使用方法处理价格 --><p>苹果价格:{{ priceHandle(priceOne)}} 元/斤</p><p>梨子价格:{{ priceHandle(priceTwo)}} 元/斤</p><p>香蕉价格:{{ priceHandle(priceThree)}} 元/斤</p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},methods:{priceHandle(price){return (price/100).toFixed(2)}}})
</script>
``````

#### 1.3 使用filters 过滤器处理数据

``````<div id="app"><!-- 过滤器 filter --><p>苹果价格:{{ priceOne | formatPrice}} 元/斤</p><p>梨子价格:{{ priceTwo | formatPrice }} 元/斤</p><p>香蕉价格:{{ priceThree | formatPrice }} 元/斤</p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{formatPrice(price){return (price/100).toFixed(2)}}})
</script>
``````

``````<div id="app"><!-- 过滤器 filter --><p>苹果价格:{{ priceOne | formatPrice}} </p><p>梨子价格:{{ priceTwo | formatPrice }} </p><p>香蕉价格:{{ priceThree | formatPrice }} </p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{formatPrice(price){return "￥"+(price/100).toFixed(2) +'元/斤'}}})</script>
``````

### 2. 过滤器传参

``````<div id="app"><!-- 过滤器传参 --><p>苹果价格:{{ priceOne | formatPrice("￥")}} </p><p>梨子价格:{{ priceTwo | formatPrice("\$") }} </p><p>香蕉价格:{{ priceThree | formatPrice("\$") }} </p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{formatPrice(price,symbol){return symbol+(price/100).toFixed(2) +'元/斤'}}})</script>
``````

### 3. 链式调用过滤器

``````<div id="app"><!-- 链式调用过滤器 --><p>苹果价格:{{ priceOne | roundPrice | formatPrice("￥")}} </p><p>梨子价格:{{ priceTwo | roundPrice | formatPrice("\$") }} </p><p>香蕉价格:{{ priceThree | roundPrice  | formatPrice("\$") }} </p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);},formatPrice(price,symbol){return symbol+price.toFixed(2) +'元/斤'}}})</script>
``````

### 4. 属性使用过滤器

``````<div id="app"><!-- 动态绑定的属性使用过滤器 --><input type="text" :value="priceOne | roundPrice | formatPrice('￥')">
</div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);},formatPrice(price,symbol){return symbol+price.toFixed(2) +'元/斤'}}})</script>
``````

### 5. 还可以通过Vue构造函数注册全局过滤器

``````<div id="app"><p>苹果价格:{{ priceOne | roundPrice | formatPrice("￥")}} </p><p>梨子价格:{{ priceTwo | roundPrice | formatPrice("\$") }} </p><p>香蕉价格:{{ priceThree | roundPrice  | formatPrice("\$") }} </p>
</div><div id="example"><!-- 在第二个vue实例上不能使用第一个实例的过滤器, -->{{ price | roundPrice }}
</div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);},formatPrice(price,symbol){return symbol+price.toFixed(2) +'元/斤'}}})const vm2 = new Vue({el:"#example",data:{price:6123}})
</script>
``````

``````<div id="app"><p>苹果价格:{{ priceOne | roundPrice | formatPrice("￥")}} </p><p>梨子价格:{{ priceTwo | roundPrice | formatPrice("\$") }} </p><p>香蕉价格:{{ priceThree | roundPrice  | formatPrice("\$") }} </p>
</div><div id="example">{{ price | formatPrice("\$") }}
</div><script>   // 注册全局过滤器Vue.filter("formatPrice",function(price,symbol){return symbol+price.toFixed(2) +'元/斤'})const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);}}})const vm2 = new Vue({el:"#example",data:{price:6123}})
</script>
``````

### 【CTF Web】CTFShow web5 Writeup（SQL注入+PHP+位运算）

web5 1 阿呆被老板狂骂一通&#xff0c;决定改掉自己大意的毛病&#xff0c;痛下杀手&#xff0c;修补漏洞。 解法 注意到&#xff1a; <!-- flag in id 1000 -->拦截很多种字符&#xff0c;连 select 也不给用了。 if(preg_match("/\|\"|or|\||\-|\\\|\/|\…

### LeetCode刷题之HOT100之三数之和

2024/5/29 天气真他妈好呀&#xff01;好天气让我舒畅&#xff0c;可惜俺今天把我养护了两三个月的栀子花花苞又整掉了一朵&#xff0c;呜呜呜&#xff01;看着它们一天天长大&#xff0c;花苞边由嫩绿泛白&#xff0c;结果被我不小心弄掉了&#xff0c;我是罪人。它们还想&…

### 【MySQL数据库】 MySQL主从复制

MySQL主从复制 MySQL主从复制主从复制与读写分离的意义主从数据库实现同步&#xff08;主从复制&#xff09;三台mysql服务器搭建主从复制&#xff0c;要求不可以用root帐号同步&#xff0c;要求第三台服务器在测试过1、2的主从复制之后进行主从复制配置 MySQL主从复制 主从复…

### SQL学习小记（三）

SQL学习小记&#xff08;三&#xff09; 功能实现思路代码部分名词解释 代码打包为可执行文件 功能说明&#xff1a;使用python代码&#xff0c;将数据库database1中的表格table1同步到数据库database2中 功能实现 思路 #mermaid-svg-R1pWrEWA799M299a {font-family:"tre…

### 计算机组成原理----原码，反码与补码

1.原码的出现 我们通常使用"","-"判断数字的正负,而在计算机中,则将二进制的首位当作标记符号,"0"表示正数,"1"表示负数,这样就解决了在计算机中表示数值正负的问题,唯一的缺点就是第1位被占作符号位。 0 0000001 原 0 0000010 原 …

### 如何在Spring Boot中整合PageHelper实现分页功能

1.前言 在开发web应用程序时&#xff0c;经常会遇到需要对数据库中的数据进行分页查询的情况。为了简化分页查询的实现过程&#xff0c;我们可以利用PageHelper这个优秀的分页插件来实现分页功能。本文将介绍如何在Spring Boot项目中整合PageHelper&#xff0c;并演示如何使用它…