我的MVVM框架 v3教程——类名切换

class绑定是用于添加或删除类名

形式有三种

data-class="object", object在VM中是个对象，它的键名即类名，由值的真假情况决定删除或添加。

data-class-className="boolean"，className为要处理的类名，值为一个布尔，用于决定删除或添加。

data-class="string"，string为要你要添加的类名。

        <style>
            .my-class{
                color: yellow;
                background:orange;
            }
            .your-class {
                line-height:3;
                width:200px;
                height:100px;
            }
            .his-class{
                text-indent:2em;
                font-size:14px;
            }
            .single{
                width:200px;
                height:100px;
                background:lightgreen;
            }
        </style>
        <div data-class="classes">添加多个类名</div>
        <div data-class-single="single" >只添加一个类名</div>

            require("avalon,ready", function($) {
                var VM = $.MVVM.render({
                    classes:{
                        "my-class":true,
                        "your-class":true,
                        "his-class":true
                    },
                    "single": true
                });
            })

示例

添加多个类名

只添加一个类名