visible: <binding-condition>
优质
小牛编辑
138浏览
2023-12-01
如名称所指定，此绑定会根据绑定中传递的值使关联的DOM元素可见或隐藏。
语法 (Syntax)
visible: <binding-condition>
参数 (Parameters)
当参数转换为类似false的值（例如boolean false，或0，或null或undefined）时，绑定会为yourElement.style.display设置display: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文件。