Vue的绑定样式,过滤器,计算属性,数据侦听

Vue的绑定样式

使用:class绑定样式

:class绑定样式时,对象的属性名是类选择器的名字,属性返回true,表示添加该选择器

对象绑定

数组绑定

:style绑定样式时,对象的属性名是css样式的名称,属性值是具体的样式


过滤器

创建过滤器

 filters: {

}

     <!-- 过滤通过管道符 | ,其实就是调用方法再把值传进去 -->

     <!-- 过滤器可以链式调用,就是之前已经过滤完成的结果继续传给下一个过滤 -->



创建全局过滤器


计算属性

   // 计算属性的优势,有缓存,当页面数据发生变化时,所有的方法会重新调用

            // 当计算属性用到的数据发生变化时,计算属性才会重新执行

计算属性写在:
computed: {

},

里,

数据的侦听

 watch:{

                // 根据属性的名称,定义一个方法用于侦听该属性的变化

                // 这个方法会传两个参数,第一个是新值第二个是旧值

                name(nval,oval){

                    console.log(nval,oval);

                },

                // 侦听对象需要深度侦听

                students:{

                    // 开启深度侦听

                    deep:true,

                    // 页面加载完成时,先运行一次(注意这种情况下 oval是undefind)

                    immediate:true,

                    // 定义监视函数

                    handler(nval,oval){

                        // 开启深度监听后旧值就没有意义了

                        // 对象的属性值已经改了,就没有旧的属性值

                        console.log(nval,oval);

                    }

                }

            },

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

推荐阅读更多精彩内容