visible, disable, css绑定

这个例子非常简单，主要演示如何通过属性控制html元素的显示与否（visible），可用性（disable）以及根据属性添加相应的CSS样式。

先简单的看一段代码：

<p>
    <input id="isvip" type='checkbox' data-bind="checked: isVip" />
    <label for="isvip">
        是否是会员
    </label>
</p>
<p>
    你的用户名是:
    <input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"
    />
    <span data-bind="visible: isVip">
        尊贵的会员欢迎你访问!
    </span>
</p>

这段代码几乎不需要解释，非常的简单易懂，就是控制input元素的可用性，根据其中的文本添加样式，和控制隐藏元素的显示。

完整代码如下：

<!DOCTYPE html>
<html>
    
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>
            Test
        </title>
        <script src="~/Scripts/jquery-2.0.3.js">
        </script>
        <script src="~/Scripts/knockout-2.3.0.js">
        </script>
        <style type="text/css">
            .account { border-bottom-color:#0094ff; background-color:#b6ff00; border-bottom-width:2px;
            }
        </style>
    </head>
    
    <body>
        <p>
            <input id="isvip" type='checkbox' data-bind="checked: isVip" />
            <label for="isvip">
                是否是会员
            </label>
        </p>
        <p>
            你的用户名是:
            <input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"
            />
            <span data-bind="visible: isVip">
                尊贵的会员欢迎你访问!
            </span>
        </p>
        <script type="text/javascript">
            function ViewModel() {
                var self = this;
                self.isVip = ko.observable(false);
                self.username = ko.observable("halower@@");
            }
            $(function() {
                ko.applyBindings(new ViewModel());
            });
        </script>
    </body>

</html>

posted on 2016-08-11 15:39  邬兴亮  阅读(271)  评论(0)  编辑  收藏  举报

导航