visible: <binding-condition>

优质
小牛编辑
132浏览
2023-12-01

如名称所指定,此绑定会根据绑定中传递的值使关联的DOM元素可见或隐藏。

语法 (Syntax)

visible: <binding-condition>

参数 (Parameters)

  • 当参数转换为类似false的值(例如boolean false,或0,或null或undefined)时,绑定会为yourElement.style.display设置di​​splay:none,使其隐藏。 这比CSS中的任何现有样式更优先。

  • 当参数转换为类似true的值(例如布尔值true或非空对象或数组)时,绑定将删除yourElement.style.display值,使其可见。

  • 如果这是一个可观察的属性,则绑定将在每次属性更改时更新可见性。 否则,它只会设置一次可见性。

  • 参数值也可以是JavaScript函数或返回布尔值的任意JavaScript表达式。 根据输出使DOM元素可见或隐藏。

例子 (Example)

我们来看看下面的例子。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Visible Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   <body>
      <div data-bind = "visible: showMe">
         You are seeing this line because showMe function is set to true.
      </div>
      <script>
         function AppViewModel() {
            this.showMe = ko.observable(false);  // hidden initially
         }
         var vm = new AppViewModel();
         ko.applyBindings(vm);                  //  shown now
         vm.showMe(true);
      </script>
   </body>
</html>

输出 (Output)

让我们执行以下步骤来查看上述代码的工作原理 -

  • 将以上代码保存在visible-bind.htm文件中。

  • 在浏览器中打开此HTML文件。