[JS][Vue]学习记录之动态绑定CSS

Demo地址

前言

清明一共休息了四天,有三天没有学习,今天继续学习.

v-bind:class

首先准备如下的CSS代码:

span{
    background: red;
    display: inline-block;
    padding: 10px;
    color: #fff;
    marin: 10px 0px;
}
.changeColor span{
    background: greenyellow;
}
.changeLength span:after{
    content: 'length';
    margin-left: 10px;
}

如果需要动态绑定CSS,用法如下:

allen

这里v-bind:class="{changeColor:changeColor}"中{}内第一个changeColor表示需要绑定的CSS样式,第二个changeColor表示是否采用这个样式.同时对这个div添加了一个点击事件,用来更改changeColor的值.

另外,还有一种方法也可以实现动态绑定:

changeLength
    

        marry
    

这里是绑定了一个compare的方法,方法实现如下:

完整代码:

    
    
    
    



动态绑定css
动态改变颜色

    allen

    
动态改变长度
    changeLength
    

        marry