Vue绑定样式&计算属性&侦听器&过滤器

1.:class绑定样式
:class绑定样式时，对象的属性名是类选择器名称，属性值返回true，表示添加该选择器
例：当点击一个按钮时，把文字背景变换颜色

 添加背景颜色
 添加文本颜色

使用属性值绑定样式

好好学习Vue

使用表达式绑定样式

 
好好学习Vue

data中的数据

 data:{
                bgColor:false,
                fontColor:false,           
            }

:style绑定样式
:style绑定样式时，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值

 
好好学习

2.计算属性:computed
computed属性是基于响应式依赖进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。在面对复杂逻辑时，应当用计算属性。computed属性也有侦听的能力

  

        {computedMessage}}
        {computedMessage}}
        {computedMessage}}
        

        {{methodsMessage()}}
        {{methodsMessage()}}
        {{methodsMessage()}}
        查看执行几次
    
    
    

执行结果：

每一个计算属性都包含一个get与一个set，computed属性默认只有get，不过在需要时可以自己提供一个set函数，当手动修改计算属性的值时，就会触发set函数，执行自定义的操作。

        
姓：
        
名：
        
计算属性返回姓名：
    

3.侦听器：watch
watch ()提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有效的。

 watch:{
                //根据属性的名称，定义一个方法，用于侦听该属性的变化
                //这个方法，可以传两个参数，第一个参数是最新值，第二个参数是旧值
                name(nval,oval){
                    console.log(nval,oval);
                },
                // 侦听对象，需要开启深度监视
                student:{
                    //开启深度监视
                    deep:true,
                    //页面加载完成时，先运行一次（注意：这种情况下，旧值是undefined）
                    immediate:true,
                    //定义监视的函数
                    handler(nval,oval){
                        // 开启深度监视后，旧值已经没有意义，因为对象是引用类型，
                        // 对象的属性值已经改了，就没有旧的属性值。
                        console.log(nval,oval);
                    }
                }
            }

computed与watch的区别
（1）：computed是同步的，watch可以实现异步
（2）：computed中的函数都是带返回值的，wacth里面的函数可以不写返回值。
4.过滤器:filters
使用方法

 
商品价格(人民币)：{{goods.price | toFixed2 | toRMB}}
filters:{
                // 过滤在模板中通过管道符 | 的方式来调用 
                toFixed2(val){
                    return val.toFixed(2)
                },
                //返回人民币数据
                toRMB(val){
                    return '￥'+ val
                },
            }

全局过滤器和局部过滤器重名时，会采用局部过滤器