Knockoutjs的控制元素的显示与隐藏方法：visible

visible从单词的意思来看就是可见的，我们就可以很容易理解为visible是控制DOM元素的可见性，通过样式display:none来隐藏元素。 visible接受的参数为布尔值，非布尔值会自动转换成布尔值。下面介绍一下visible常见的使用场景：

第一种：直接将值放在元素上（这种使用方法没有任何意义）

<div data-bind="visible:false">小虾虎鱼</div>
ko.applyBindings({});
 
如果将上面的写法改进一下，如：
<div data-bind="visible:list().length>0">小虾虎鱼</div>
var viewmodel = {
        list:ko.observableArray()
};
ko.applyBindings(viewmodel);

如果数组list长度大于0则显示，否则不显示。这种使用方法在开发中还是很有用处的。

第二种：将值放在模型里面

<div data-bind="visible:visible">小虾虎鱼</div>
var viewmodel = {
        visible:ko.observable(false)
}
ko.applyBindings(viewmodel);

如果我们也将上面的方法改进一下，做成点击按钮控制其显示隐藏的效果：

<div><button data-bind="click:show">显示/隐藏</button></div>
<div data-bind="visible:false">小虾虎鱼</div>
var viewmodel = {
    visible:ko.observable(false),
    show:function(){
        this.visible(!this.visible());
    }
};
ko.applyBindings(viewmodel);

使用visible还可以做出tab效果，如：

<div>
    <button data-bind="click:show.bind($data,1)">按钮1</button>
    <button data-bind="click:show.bind($data,2)">按钮3</button>
    <button data-bind="click:show.bind($data,3)">按钮3</button>
</div>
<div data-bind="visible:visible()===1">内容1</div>
<div data-bind="visible:visible()===2">内容2</div>
<div data-bind="visible:visible()===3">内容3</div>

var vm = {
    visible:ko.observable(1),
    show:function(index){
        this.visible(index);
    }
};
ko.applyBindings(vm);

当然，visible能实现的效果不止这些，我们只需要理解：visible就是用来控制DOM元素的显示与隐藏。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索数组
， dom
， this
模型
，以便于您获取更多的相关知识。