vue2 绑定样式-计算属性-数据侦听器-过滤器

1st.绑定样式

    :class="{active:activeIndex===index}"

对象里面属性名是class类选择器名，属性值是布尔值，当布尔值是true时绑定前面的class

    :class="[activeIndex1===index?'active':''",activeIndex2===index?'active':''",activeIndex3===index? 'active':''",]"

绑定样式还可以写数组，数组里用三元表达式表示需要绑定的class类选择器名

:class="activeIndex===index?'active':''""

当只有一个class类选择器需要绑定时，三元表达式也可以直接写

    :style="{backgroundColor:bc,color:fc}"

绑定行内样式时，属性名是样式类型，属性值可以用data里面声明的变量来表示

2nd.计算属性

    当页面中绑定的数据发生变化时，因为不确定改变的数据，所以绑定数据的所有方法都会执行一遍，而计算属性因为有缓存，所以只有发生改变的那个计算熟悉会执行。

计算属性声明：

// 计算属性，计算属性本质上其实是方法

    computed:{

        // 在这里，我们定义的是方法，只不过这方法在模板中，可以当做属性来使用

        fullName(){

            return this.firstName+'.'+this.lastName

        },

        // 计算属性的简单写法，就是定义一个方法，由该方法返回出去一份结果，所有它是只读的。

        // 如果要修改计算属性的值，就要使用完整的写法

        fullName2:{

            // get方法，返回计算属性的结果

            get(){

                return this.firstName+'.'+this.lastName

            },

            // set方法，修改计算属性的结果，该方法接收一个参数是最新的值

            set(val){

                if(val.indexOf('.')!==0){

                    let arr = val.split('.')

                    this.firstName = arr[0]

                    this.lastName = arr[1]

                }

            }

        },

使用计算属性：

姓名：{{fullName}}

3rd.数据侦听器

要侦听哪个属性，就以那个属性的名称为方法名，定义一个方法,

当属性的值发生变化时，该方法就会执行。

watch:{

    // 该方法，有两个参数，第一个参数是新值，第二参数是旧值

    name(nval,oval){

        console.log('name属性值发生变化了',nval,oval);

    },

}

如果要实现深度侦听对象的变化，就需要使用完整的写法，定义一个对象

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

 immediate 设置监视器默认执行一次

// 侦听emp对象是否发生了变化

emp:{

    // 深度监视

    deep:true,

    // 设置监视器，默认执行一次

    immediate:true,

    // 通过handler定义监视器的方法

    handler(nval,oval){

        console.log('员工信息发生变化了',nval,oval);

    }

}

4rd. 过滤器

定义过滤器有两种方式：局部过滤器，全局过滤器

局部过滤器，只是当前Vue实例可以访问

全局过滤器，所有的Vue实例都可以访问

定义过滤器

 局部过滤器，里面定义的过滤器只是当前Vue实例可以访问，优先使用局部过滤器

filters:{

    // 每个过滤器其实，也是一个方法，该方法接收一个参数。

    // 对参数进行过滤，然后重新返回。

    toRMB(val){

           return '¥'+val.toFixed(2)

     },

     toUS(val){

        return '$'+(val/6.4634).toFixed(2)

     }

 } 

全局过滤器，所有的Vue实例都可以访问

Vue.filter('toRMB', function(val){

    return '¥'+val.toFixed(2)

})

Vue.filter('toUS', function(val){

    return '$'+(val/6.4634).toFixed(2)

})

Vue.filter('strReverse', function(val){

    return val.split('').reverse().join('')

})

使用过滤器

过滤器只能在插值表达式 和  v-bind表达式中使用。通过“管道符” | 指定使用具体的过滤器。原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。

    

价格：{{goods2.price | toRMB}}