## WeX5数据绑定02：visible绑定 visible绑定(bind-visible)可以绑定可监控对象来动态控制元素是否在页面中显示。bind-visible也可以绑定复杂的表达式来控制元素是否显示。 ## 基本使用 html源码 <div bind-visible="shouldShowMessage"> 当"shouldShowMessage"为 true时，才能看到这段消息 </div> <button component="$UI/system/components/justep/button/button" class="btn btn-warning" bind-click="buttonClick">点我切换 </button> js源码 var Model = function(){ this.callParent(); this.shouldShowMessage = justep.Bind.observable(true); }; Model.prototype.buttonClick = function(event){ this.shouldShowMessage.set(!this.shouldShowMessage.get()); }; 这段代码展示了bind-visible的用法。将上述代码贴到页面运行起来，点击按钮可切换文字的显示和隐藏。 visible绑定规则：**通过绑定元素的style.display来控制元素显示**。当绑定对象的值为true、不为空的对象、数组的时候，元素的style.display样式会被移除，从而使元素显示；当参数为false、null、undefined、 数字0、空字符串的时候，将会为元素添加样式style.display:none，从而将元素隐藏。 如果绑定的是监视属性，那么当属性改变的时候界面也会发生改变。 ## visible绑定表达式 还可以为visible绑定表达式，例如： js源码 var Model = function(){ this.callParent(); this.myValues = justep.Bind.observableArray([]); }; Model.prototype.buttonClick = function(event){ if(this.myValues.get().length > 0){ this.myValues.removeAll(); } else{ this.myValues.push('some value'); } }; 上面js代码创建了一个可监控数组对象。buttonClick事件根据可监控数组对象的长度来执行清空数组或向数组增加一项。关于可监控数组对象后面文章会详细介绍。 html源码 <div bind-visible="myValues.get().length > 0"> 当"myValues"数组值得长度大于0，才能看到这段消息 </div> <button component="$UI/system/components/justep/button/button" class="btn btn-warning" bind-click="buttonClick">点我切换 </button> 在上面的代码中，visible绑定的是一个表达式。当myValues的长度发生变化时，visible会被重新计算并设置。 bind-visible=”myValues.get().length > 0″ 这个绑定表示如果myValues的长度大于0，就显示元素div，否则就隐藏。