首页 > 代码库 > 通过两个简单例子介绍avalon
通过两个简单例子介绍avalon
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://www.mamicode.com/avalon.js"></script> <style> *{ list-style:none; margin: 0;padding: 0; boder:0;} .color_cs{ background: #ff9999; width: 400px; height: 400px;} </style> </head> <body> <div ms-controller="square" style=" background:#99ccff;"> <ul style=" width: 1500px; display: inline-block; "> <li ms-repeat="model"><div style=" width: 200px; height: 200px; background: #66ffcc; margin: 10px 0 0 10px;float: left; display: block;" ms-click="remove($remove)" ms-mouseover="color_cs:color_change" >{{el}}</div></li> </ul> <div> <input type="button" ms-click="add" value="http://www.mamicode.com/add"> </div> </div> <script> var i = 3; avalon.define("square",function(vm){ vm.model = ["1 "," 2"," 3"]; vm.add = function (){ vm.model.push(vm.model[i] = [i+1]);/// push（）是avalon的添加事件 i++; } vm.remove = function(rm){///$remove是avalon 的删除事件，指定删除事件 rm(); }; }); </script> </body></html>1 <html> 2 <head> 3 <title>TODO supply a title</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <script src="http://www.mamicode.com/avalon.js"></script> 7 <style> 8 *{ list-style:none; margin: 0;padding: 0; boder:0;} 9 .bb{ width: 200px; height: 200px; margin: 10px 0 0 10px; float: left; display: block} 10 .dd{ background: #ffcccc;}11 </style>12 </head>13 <body>14 <div style="background: #d1fcfb;" ms-controller="change">15 <ul style=" width: 1500px;display: inline-block;"><li ms-repeat="model" ms-mouseover="bb(el)" ms-mouseout="cc(el)" ms-visible="!aa || el == aa" ><div class="bb" ms-class="dd:ff" >{{el}}</div></li></ul>16 </div>17 <script>18 avalon.define("change",function(vm){19 vm.model = ["1","2","3","4","5","6"];20 vm.ff = false; //设置ff默认为false 21 vm.aa = ‘‘;22 vm.bb = function(el){23 if(vm.aa)24 vm.aa = ‘‘;25 else26 vm.aa = el;27 vm.ff = true; //当ff为ture时执行class的dd样式....因为ms-class目前不能直接写其他样式，只能写ms-css-width 和ms-css-height，所以28 } //所以必须设置一个样式才能运行29 30 vm.cc = function(el){31 if(vm.aa)32 vm.aa = ‘‘;33 else34 vm.aa = el;35 vm.ff = false; //当ff为false是恢复原样36 }37 38 39 })40 </script>41 </body>42 </html>
通过两个简单例子介绍avalon
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。