zoukankan      html  css  js  c++  java
  • avalon ms-repeat avalon1

    工作原因要用到avalon二次开发, 但是看了下以前的avalon版本是1,现在大多数都是2版本了吧,,所以很多文档不好找,但是大多数还是好用的

    ms-repeat

    循环当前赋值的, 

    ms-repeat:加载需要循环显示的子元素上:默认el
    ms-repeat-item–>修改为item
    ms-each:作用到需要循环子元素的父元素上

    HTML正文:

    <body ms-controller="test">
    <p>数组遍历</p>
    <!-- $index:下标 
         $last最后一个元素 -->
    <ul>
    <li ms-repeat-item="array">{{item}}---->{{$index}}</li>
    </ul><br>
    
    <p>ms-each</p>
    <ul ms-each="array">
    <li>{{el}}<span ms-if="!$last">--></span></li>
    </ul><br>
    
    <!-- $key:属性名  $val属性值  ms-with类似ms-each-->
    <p>ms-repeat对象属性遍历</p>
    <ul>
    <li ms-repeat="objects">{{$key}}-->{{$val}}</li>
    </ul><br>
    
    <p>ms-with对象属性遍历</p>
    <ul ms-with="objects">
    <li>{{$key}}-->{{$val}}</li>
    </ul>
    </body>

    JavaScript操作代码:

     var vm=avalon.define({
        $id:"test",
        array:[111,222,333],
        objects:{aaa:"1111",bbb:"2222",ccc:"3333"}
    });

    效果:
    这里写图片描述

    有点要注意的是,ms-repeat似乎不能利用当前的键值进行判断,需要放到下一级

    比如,下面这个,判断只显示第一个,这样是不行的

            <img ms-repeat="lunlist" onerror="this.src='images/buy/x_02.png'" ms-src="el.image" ms-attr-id="$index" ms-if="$index==0" style=" 100%;height: 210px;"/>

    需要改为第二级判断

    <div ms-repeat="lunlist">
            <img onerror="this.src='images/buy/x_02.png'" ms-src="el.image" ms-attr-id="$index" ms-if="$index==0" style=" 100%;height: 210px;"/>
        </div>

    当然 $last 判断也是一样  键值$index 是从0 开始的

  • 相关阅读:
    在做nginx的服务器http错误和解决办法
    利用ffmpeg将MP4文件切成ts和m3u8
    整理:服务器命令(笔记)
    函数式编程
    Object
    promise
    前端模块化、工程化
    函数
    restful && rpc
    全局、局部变量
  • 原文地址:https://www.cnblogs.com/zongsir/p/7196399.html
Copyright © 2011-2022 走看看