2021-11-25 计算属性 侦听器 过滤器

 一.vue绑定样式的四种方式

1. <!--:class绑定样式的时候,对象的属性名是类选择器的名称,属性值为 true 表示添加类选择器 -->

:class="{active:index===activeIndex}"(active:css类选择器的名称)表达式只是充当boolean用

2.可以直接在vue实例中定义一个属性 给他赋予boolean值

:class="{bg:bg}"(第一个bg是css类选择器的名称,第二个bg是data里面的数据)

3.可以利用三元表达式

:class="bg? 'active':'' "(bg 是data 里面的数据,active:css类选择器的名称,:后面是空)

4.可以直接绑定行内式

:style=“{ backgroundColor:bac }"

:style绑定样式时,对象的属性名称是css样式的名称(要使用小驼峰命名法), bac是data里面具体的样式

二.计算属性(computed)

1.必须要在页面调用才能执行  可以直接将方法名直接插值表达式,优点,页面渲染会先执行一次,然后计算属性是具有缓存的只有计算属性里面用到的属性发生变化才会在执行一次 ,方法则是调用一次就执行一次 

2.如果computed 里面是一个方法 他就只能读不可以修改

3.想要 computed  计算属性可以读 可以写 就需要 写一个对象 ,用set 和get 方法  

get用于返回 计算属性的值  set 用于修改计算属性的值  set有一个参数val

三.数据侦听器(watch)用于监听数据的变化 

方法名 直接用data 数据里面的属性名称 属性值一发生变化 就会自动调用这个方法,这个方法有两个参数一个新值一个旧值

如果需要监听 对象里面数据的变化 ,就需要采用深度监听 需要完整的写法 定义一个对象

// 在对象中,通过deep属性设置深度监视

obj:{

deep:true, 开启深度监听,

immediate:true,设置开始就执行一次

handler(nval,oval){

}

通过handler 定义监听器的方法 监听数据 

4.过滤器 filters

1.过滤器 分为全局过滤器  和局部过滤器  全局 就是整个页面都可以使用,局部 过滤器 只有当前 vue实例可以使用,

2.filters:{

 tofixed22( val){

            return val.toFixed(2)

        }保留两位小数的过滤器  

}

3.使用  在数据右边使用  使用管道符 |

{{goods.price | tofixed22   |  toUSA}} 过滤器还可以链式调用 ,把 过滤出来的值传给下一个过滤器 

4.局部 过滤器和全局过滤器冲突 优先级高的是局部过滤器 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容