knockout控制一个元素的显示和隐藏

最新推荐文章于 2020-08-06 13:48:50 发布

weixin_34392906

最新推荐文章于 2020-08-06 13:48:50 发布

阅读量496

点赞数

文章标签： python

原文链接：https://my.oschina.net/yxmBetter/blog/1585430

版权

2019独角兽企业重金招聘Python工程师标准>>>

绑定数据的方式

如果你还不会，赶紧戳下面的链接先学习一下吧
页面绑定值的方式

需求

有时候需要在页面中根据数据的长度控制一个元素的显示和隐藏
当然，在使用嵌套数据增加一个属性的方式也是可以实现的（分类名称只有在有数据的时候才显示，否则隐藏）
或者绑定方法动态改变

<div>
    <div>分类名称</div>
    <div v-model="viewModel">
        <ul>
            <li data-bind="foreach:data"><span data-bind="name"></span></li>
        </ul>
    </div>
</div>
//此时需要的数据类型是这样的
// data = [{name:a},{name:b},{name:c}]

//需要将v-model数据视图模型放到最外层，然后最外层绑定数据
<div v-model="viewModel" data-bind="outData">
    <div data-bind="isExist">分类名称</div>
    <div>
        <ul>
            <li data-bind="foreach:data"><span data-bind="name"></span></li>
        </ul>
    </div>
</div>
//此时需要的数据类型是这样的，再请求数据后判断isExist的值
// outData= {isExist:false, data:[{name:a},{name:b},{name:c}] }

解决更简便的方式：使用visible和length属性直接判断

将v-model数据视图模型放到最外层
直接判断data数据的长度

<div v-model="viewModel">
    <div data-bind="visible:data().length>0">分类名称</div>
    <div>
        <ul>
            <li data-bind="foreach:data"><span data-bind="name"></span></li>
        </ul>
    </div>
</div>