avalon视频学习笔记（四）

二、显示隐藏处理

含义：效果类似于jquery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。


 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>avalon-visible</title>
  <style type="text/css">
	div div{
		width:260px;
		height:100px;
	}
	div.d1{
		background:red;
	}
	div.d2{
		background:green;
	}
	div.d3{
		background:blue;
	}
  </style>
  <script type="text/javascript" src="../avalon.min.js"></script>
  <script type="text/javascript">
	avalon.ready(function(){
		var vm = avalon.define({
			$id:‘text‘,
			currentIndex:1,
			isShowBox:false,

			toggle:function(index){
				vm.currentIndex=index;
			}
		});

		setTimeout(function(){
			vm.isShowBox=true;
		},3000);

		avalon.scan();
	})
  </script>
 </head>
 <body ms-controller="text">
	<div ms-visible="isShowBox">
		<button ms-click="toggle(1)">色块[red]</button>
		<button ms-click="toggle(2)">色块[green]</button>
		<button ms-click="toggle(3)">色块[blue]</button>
		<div class="d1" ms-visible="currentIndex===1"></div>
		<div class="d2" ms-visible="currentIndex===2"></div>
		<div class="d3" ms-visible="currentIndex===3"></div>
	</div>
 </body>

来自为知笔记(Wiz)

时间： 2024-08-28 00:51:46

avalon视频学习笔记（四）的相关文章

avalon视频学习笔记（三）

一.双向同步,双向绑定ms-duplex 含义:ms-duplex实现了双向数据绑定.双向绑定通俗说,除了负责将ViewModel中的应的值放到表单元素的value中,还对表单元素偷偷绑定一些事情,用于监听用户的输入从而自动刷新ViewModel. 使用场景一: 当元素为text.password.textaera时,要求prop为一个字符串,当我们改动它的内容时,avalon就会将此元素的value值赋给prop. <head> <meta charset="UTF-

avalon视频学习笔记（六）

一.数据缓存 1.绑定属性ms-data-* avalon的数据缓存功能与jquery的data()类似,但不同于jquery的是:avalon是直接将数据保存在元素节点上的data-*属性上. 在从data-*属性还原数据时,它会作简单的数据转换,再返回. 在ms-data绑定属性中,对象与数组是直接保存在元素节点上. <head> <meta charset="UTF-8"> <meta name="Generator" c

avalon视频学习笔记（七）

一.属性操作 DOM操作之属性操作: 1.类名操作<div class="active"> ms-class (1)ms-class a.ms-class="active" 默认写法,为元素添加active样式 b.ms-class="active:isOk" isOK值为true,添加active,为false,删除active c.ms-class="width{{w}}:isOK"

avalon视频学习笔记（五）

一.插入移除处理 1.绑定属性ms-if a.当ms-if的值为真(true)时,就将元素输出到页面里面. <div ms-controller="text"> <div ms-if="true"> 根据条件显示内容 </div> </div> <div avalonctrl="test"> <div> 根据条件显示内容 </div> </div&g

avalon视频学习笔记（一）

一.禁用加载器方法一:在js文件中书写 avalon.config({ loader: false }) 方法二:在avalon源文件中添加 avalon.config({ loader: false }) 方法三:在源文件中删除amd加载器二.作用域绑定含义:作用域范围圈定,在一个页面中需要形成多个模块,每个模块需要实现不同功能. 1.ms-controller 可以互相嵌套的作用域含义:在页面上表现为一个特殊属性,其属性值为ViewModel的$id,表现将在此元素或者其子孙

avalon视频学习笔记（二）

一.数据填充含义:将数据打印到页面上,通过绑定属性,将页面变成动态模版 1.插值表达式 {{prop}},{{prop | html}}定界符及自动配置含义:{{prop}}是对某一文本节点的nodeValue进行修改,因此不会影响兄弟节点,{{prop}}只是表示这个地方可以被替换,在avalon中,它只在文本节点中有效,它不能替换属性节点里的名字,特性节点的名字必须以ms-开头. a.{{prop}} <head> <meta charset="UTF-8"&

代码管理工具 --- git的学习笔记四《重新整理git(1)》

1.创建版本库 mkdir 创建目录 cd 地址,到该地址下 pwd 显示当前目录 1.创建目录 $ mkdir startGit $ cd startGit $ pwd 显示当前目录或者cd到桌面,然后再创建目录 2.初始化版本库 $ git init 初始化仓库提示信息:Initialized empty Git repository in /Users/xingzai/Desktop/startGit/.git/ 建立一个空的git仓库在/Users/xingzai/Desktop

Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能

Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能说一下IHandle<T>实现多语言功能因为Caliburn.Micro是基于MvvM的UI与codebehind分离, binding可以是双向的所以我们想动态的实现多语言切换很是方便今天我做一个小demo给大家提供一个思路先看一下效果点击英文变成英文状态点chinese就会变成中文源码的下载地址在文章的最下边多语言用的是资源文件建

Linux学习笔记四：Linux的文件搜索命令

1.文件搜索命令 which 语法:which [命令名称] 范例:$which ls 列出ls命令所在目录 [[email protected] ~]$ which ls alias ls='ls --color=auto' /bin/ls 另外一个命令:whereis [名称名称],也可以列出命令所在目录. [[email protected] ~]$ whereis ls ls: /bin/ls /usr/share/man/man1/ls.1.gz /usr/share/man/ma