Knockout.js隨手記(8)

時間 2019-11-06

標籤 knockout.js knockout 隨手欄目 JavaScript 简体版

原文原文鏈接

visible, disable, css綁定

　　這個例子很是簡單，主要演示如何經過屬性控制html元素的顯示與否（visible），可用性（disable）以及根據屬性添加相應的CSS樣式。javascript

先簡單的看一段代碼：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元素的可用性，根據其中的文本添加樣式，和控制隱藏元素的顯示。html

完整代碼以下：

<!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>

運行效果java

備註：jquery

本文版權歸你們共用，不歸本人全部，全部知識都來自於官網支持，書本，國內外論壇，大牛分享等等......後續將學習knockout.js的經常使用功能。app

若是你喜歡本文的話，推薦共勉，謝謝！學習

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。