Ruby's Louvre

每天学习一点点算法

导航

我的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
                });
            })
示例
添加多个类名
只添加一个类名
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年

posted on 2012-12-17 13:36  司徒正美  阅读(2558)  评论(0编辑  收藏  举报