[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的值.

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


    
marry

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


完整代码:




    
    The forth day
    
    


动态绑定css

动态改变颜色

allen

动态改变长度

marry

你可能感兴趣的:([JS][Vue]学习记录之动态绑定CSS)