今天的主角是ms-visible，它的效果类拟于jQuery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。不过显示不是 display:none这么简单，众所周知，display拥有inline, inline-block, block, list-item, table, table-cell等十来个值，比如用户之前是让此LI元素表示inline-block，实现水平菜单效果，你直接display:block就会撑破布局。因此元素之前是用什么样式显示，需要保存下来，当表达式转换为真值时再还原。

<!DOCTYPE html>
<html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><script src="./dist/avalon.js"></script><script >var vm = avalon.define({$id: "test",toggle: false,array:[1,2,3,4]})</script><style>table{width:300px;border-collapse: collapse;border:1px solid red;}td {padding:5px;border:1px solid red;}.menu{display:inline-block;*display:inline;*zoom:1;width:140px;padding:5px 20px;text-align: center;margin-left:1em;border: 1px solid greenyellow;}.btn{padding:5px 20px;margin-left:1em;display: inline-block;}</style></head><body ms-controller="test" ><table ms-visible="@toggle" border="1" ><tr ms-visible="@toggle"><td>1111</td><td>1111</td></tr><tr><td>1111</td><td>1111</td></tr></table><br/><table border="1" ><tr ms-visible="@toggle"><td >aaa</td><td>bbb</td></tr><tr><td ms-visible="@toggle">ccc</td><td>ddd</td></tr></table><table border="1" ><tr ms-for="el in @array"><td ms-visible="@toggle">{{el}}</td><td ms-visible="@toggle">{{el+10}}</td></tr></table><div style="display:none" class="menu" ms-visible="@toggle">item</div>  <button style="display:none" class="btn" type="button" ms-visible="@toggle">btn</button> <p><input type="button" ms-click="@toggle = !@toggle" value="click me"></p></body>
</html>

这里用到ms-for循环指令及ms-click事件指令，语法与ng没有二致，不懂可以暂时忽略。

再看它能否处理内联样式的干扰：

<!DOCTYPE html>
<html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><script src="./dist/avalon.js"></script><script >var vm = avalon.define({$id: "test",toggle: true})</script><style>div div{flex:1;margin: 20px;height: 30px;background: #a9ea00;}</style></head><body ms-controller="test" ><div ms-visible="@toggle" style="display: flex;display:-webkit-flex;background: #ffd"><div></div> <div></div> <div></div></div><p ms-click="@toggle = !@toggle">click me</p></body>
</html>

我们再来一个有用的例子，做一个切换卡。

<!DOCTYPE html>
<html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><script src="./dist/avalon.js"></script><script >var vm = avalon.define({$id: "test",curIndex: 0, //默认显示第一个buttons: ['aaa', 'bbb', 'ccc'],panels: ["<div>面板1</div>", "<p>面板2</p>", "<strong>面板3</strong>"]})</script><style>button{margin:1em 3em;}.panel div{height:200px;background: #a9ea00;}.panel p{height:200px;background: green;}.panel strong{display:block;width:100%;height:200px;background: #999;}</style></head><body ms-controller="test" ><div><button ms-for='(i, el) in @buttons' ms-click='@curIndex = i'>{{el}}</button></div><div class='panel' ms-for='(jj, el) in @panels' ms-visible='jj === @curIndex' ms-html='el'></div></body>
</html>

avalon2学习教程04显示隐藏处理相关推荐

  1. jQuery 入门教程(5): 显示/隐藏内容

    2019独角兽企业重金招聘Python工程师标准>>> jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show() 可以 ...

  2. 微信公众平台jsapi开发教程(8)显示隐藏网页右上角菜单

    文章来源 http://www.vxzsk.com/119.html 微信官方jsapi提供了界面操作接口,用来控制微信网页右上角的菜单,下面看看微信官方文档关于界面操作接口的说明. 隐藏右上角菜单接 ...

  3. avalon2学习教程15指令总结

    avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...

  4. avalon2学习教程11数据联动

    在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.因为avalon拥有经典MVVM框架的一大利器,双向绑定!绝大 ...

  5. avalon2学习教程11数据联动 1

    在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.因为avalon拥有经典MVVM框架的一大利器,双向绑定!绝大 ...

  6. 【强化学习实战-04】DQN和Double DQN保姆级教程（2）：以MountainCar-v0

    [强化学习实战-04]DQN和Double DQN保姆级教程(2):以MountainCar-v0 实战:用Double DQN求解MountainCar问题 MountainCar问题详解 Moun ...

  7. jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）

    day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...

  8. 从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录 从零开始学前端:程序猿小白也可以完全掌握!-今 ...

  9. CSS学习221~249（定位+元素的显示隐藏）

    1 定位 1.1 为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 1.2 ...

最新文章

  1. R语言使用table1包绘制（生成）三线表、使用单变量分列构建三线表、设置transpose参数转置三线表、变量作为列，子组（strata）作为行
  2. pr如何处理音效_Pr基础全通关：从0到1，进阶剪辑大神
  3. 如何一条命令，榨干机器的所有内存？
  4. VB6 无法加载ieframe.dll，导致不能使用 浏览器控件--(转载)
  5. 三分钟让面试官满意系列 - Bagging和Boosting 的联系及区别
  6. python计算数组元素个数_python简单获取数组元素个数的方法
  7. 浪潮之颠一_读书笔记
  8. 使用百度 AI 进行智能写诗 智能春联
  9. 文学杂谈001--《遥远的救世主》
  10. vb.net 教程 20-3 控制Ie浏览器 3 获得Ie窗口句柄
  11. 基于云开发的查单词小程序设计 报告+PPT+项目源码+演示视频
  12. Apache的JK插件
  13. python修改散点图中点的颜色_更改matplotlib中散点图点的颜色
  14. unity 移动开发优化二 图形优化，脚本优化概述
  15. 无尽学习者修炼指南 v3.0
  16. 使用Python进行Excel文件拆分
  17. 模拟电子入门需要掌握的点(上)
  18. mongodb重置密码
  19. PDF编辑_隐私条款
  20. 写代码必备Linux命令

热门文章

  1. Exception in thread “Quartz Scheduler [HmpScheduler]“ org.springframework.scheduling.SchedulingExcep
  2. android开机优化服务,Android开机速度优化简单回顾
  3. 用typescript开发koa2的二三事
  4. 大学暑假第四周进度报告
  5. 终端报错xcrun: error: unable to find utility “xcodebuild”, not a developer tool or
  6. RIPv2与EIGRP的自动汇总区别
  7. eclipse重置页面恢复到最初布局状态
  8. ASP.NET MVC增删改查
  9. 修改内核配置解决busybox的mdev -s启动速度慢的问题
  10. 如何修改Win7开机登陆界面背景图片