今天做项目的过程中遇到了一个需求,就是需要对价格进行格式处理。这种需求使用filter过滤器肯定是可以的。然后我就联想到了计算属性与就侦听器。今天简单对他们进以下介绍吧!
那我就先来介绍一下filter吧!
首先我们要先了解的是它的实质是什么?(本质修饰作用)
以我自己的理解就是不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理。 主要用于对数据格式进行转换。
实质了解完,正好解决一下我遇到的那个问题。介绍一下它的用法
要知道过滤器分为两种全局过滤器和局部过滤器
为了满足我的需求,两种过滤器的写法我都展示在下面:需求是将价格前面加上 ¥ 以及保留两位小数
先是局部过滤器:
//局部过滤器
<div>价格:{{price | showPrice}}</div>
<script>
let vm = new Vue({
el:"#app",
data:{
price:200
},
filters:{
//处理函数
showPrice(value){
console.log(value) // ¥200.00
return '¥' + price.toFixed(2)
}
}
})
</script>
局部过滤器的用法:
在实例中定义:
filter:{
过滤器名:function(value,其他参数(可传可不传)){
// 对value进行处理,然后return返回处理后的结果
return ...
}
使用时:
{{price | showPrice}} // 把price当做showPrice的value参数进行处理,return返回处理的结果
然后是全局过滤器
<div id="app">
<h3>{{price | showPrice}}</h3>
</div>
<script>
Vue.filter("showPrice",(value)=>{
return '¥' + price.toFixed(2)
})
let vm = new Vue({
el:"#app",
data:{
price:200
}
})
</script>
全局过滤器的用法:
// 全局过滤器 项目中一般写在main.js中
vue.filter(过滤器名,function(value){
return ...
})
全局过滤器的第一个参数是过滤器名称,第二个参数是处理函数,处理函数的第一个参数就是管道符的左边内容...
注意点:
局部过滤器 是filters 全局是filter (虽然全局加上s,不会报错但是该过滤器不会执行。)
当全局过滤器和局部过滤器重名时,会采用局部过滤器。
在 vue2 中默认不能使用过滤器,需要使用 v-html="$options.filters.过滤器名"
一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
对于过滤器的用法也有两种 一种是双花括号插值,一种是 v-bind
表达式
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
还有就是关于过滤器的传参问题了。
{{message | filterA}}
// 上面这种写法右边是过滤器函数 左边内容时传给右面函数的第一个参数
{{message | filterA | filterB}}
//上述代码中,message是作为参数传给filterA函数,而filterA函数的返回值作为参数传给filterB函数,最后显示最终结果
{{message | filterA ('para1','para2')}}
//filterA函数的参数依次是 message ,para1,para2
{{'message1','message2' | filterA}}
//上述代码中,filterA函数的参数依次是 message1 , message2
以上就是我对filter的一些总结。
接下来就是计算属性咯
如果计算属性中依赖的数据项发生变化时,他会自动变化
它的使用场景:在模板中可以直接通过插值语法简单的表达式显示一些data中的数据,但是有的时候如果我们放入太多的逻辑互让模板很难维护,对于复杂的逻辑,我们可以使用计算属性
举一个简单的小例子
<p>计算属性:{{ fullName }}</p> // 小 白
data() {
return {
firstName: "小",
lastName: "白",
};
},
computed: {
fullName: {
return this.firstName + " " + this.lastName;
},
}
下面是它的用法
computed: {
计算属性名(){
//对依赖的数据进行处理
return //处理后的返回
}
}
// 视图中
{{计算属性名}}
另外一个就是计算属性的setter和getter方法了
- 计算属性一般没有set方法 ,只读属性
-
data() { return { firstName: "小", lastName: "白", }; }, computed: { fullName: { //有setter方法时 必须要传递参数 (修改属性值时会用到此方法,但是确实很少用) set: function (newValue) { console.log(newValue); }, get: function () { return this.firstName + " " + this.lastName; }, }, }
计算属性是在原来数据的基础上加工计算出新数据,并且他具有缓存,可以提高渲染能力
最后就是侦听器watch
watch和计算属性computed有些相似,但是计算属性中必须有return返回值,而侦听器是函数处理,返回值是没有意义的
watch: {
属性名:function(){ // 侦听的是data中的数据项,数据项一旦变化,调用函数
}
}
今天总结的内容就先到这里。接下来我会分享更多自己的学习心得与总结!如果对于哪里你有不同的见解,欢迎指正!