visible绑定(The "visible" binding)

本文介绍如何使用KnockoutJS的visible绑定来控制页面元素的显示与隐藏。通过示例展示了如何利用observable属性动态地调整元素可见性,并介绍了使用函数或表达式作为绑定值的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对visible进行绑定可以控制元素的显示和隐藏。

示例:

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div> 
<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // Message initially visible
    };
    viewModel.shouldShowMessage(false); // ... now it's hidden
    viewModel.shouldShowMessage(true); // ... now it's visible again
</script>

参数说明:

  • Main parameter
  • 当参数值是False时(包括数字0,或者null, undefined),绑定的元素会被设置style.display为none,元素隐藏。这会覆盖你写的其他样式。
  • 当参数是true时(包括true, 非空对象或数组),绑定的元素style.display会被移除,元素可见。

如果绑定到visible的属性是observable的,则当值改变时,元素的可见或者隐藏也会动态的更改。如果绑定上的值不是observable的,那么只在第一次绑定时会生效,后面更改这个值是不会影响到元素的可见与否的。

  • Add parameters

注:使用函数和表达式控制元素的可见

也可以使用JS函数或者表达式来赋值,KO会根据函数或者表达式的值来动态的控制元素的显示和隐藏。

示例:

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.
</div>
 
<script type="text/javascript">
    var viewModel = {
        myValues: ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible
</script>

依赖

无,除了Knockout的核心库外。

转载于:https://www.cnblogs.com/wileywong/p/4209007.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值