Avalon 学习系列(四)—— 循环遍历

Avalon2ms-for 绑定集齐了 ms-repeat, ms-each, ms-with 的所有功能, 更加好用, 性能也提升了很多。

Avalon 不需要 vuereact 那样使用 key 属性来提高性能,内部已经帮你搞定了。

循环数组

ms-for 循环数组示例:

DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Demo Avalontitle>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./avalon.js">script>
  <script type="text/javascript">
    var vm = avalon.define({
      $id: "maincontainer",
      arr: ['上海', '北京', '广州', '深圳']
    })
  script>
  <style>
    .ms-controller {
      display: none;
    }
  style>
head>

<body>
  <div>
    <div ms-controller="maincontainer">
      <ul>
        <li ms-for="($index,el) in @arr">{{$index+':'+el}}li>
      ul>
    div>
  div>
body>

html>

页面效果:
Avalon 学习系列(四)—— 循环遍历_第1张图片

ms-for 支持下面的元素节点继续使用 ms-for,形成双重循环与多级循环;但双重循环必须对应的二维数组,几维循环对应几维数组。

示例:

DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Demo Avalontitle>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./avalon.js">script>
  <script type="text/javascript">
    var vm = avalon.define({
      $id: "maincontainer",
      arr: [
        { item: ['上海', '北京', '广州', '深圳'] },
        { item: ['上海', '北京', '广州', '深圳'] },
        { item: ['上海', '北京', '广州', '深圳'] },
        { item: ['上海', '北京', '广州', '深圳'] }
      ]
    })
  script>
  <style>
    .ms-controller {
      display: none;
    }
  style>
head>

<body>
  <div>
    <div ms-controller="maincontainer">
      <ul>
        <li ms-for="el in @arr">
          <div ms-for='($index,piece) in el.item'>{{$index+':'+piece}}div>
        li>
      ul>
    div>
  div>
body>

html>

页面效果:
Avalon 学习系列(四)—— 循环遍历_第2张图片

循环对象

ms-for 循环对象示例:

DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Demo Avalontitle>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./avalon.js">script>
  <script type="text/javascript">
    var vm = avalon.define({
      $id: "maincontainer",
      styleInfo: {
        width: 400,
        height: 400,
        borderWidth: 1,
        borderColor: "green",
        borderStyle: "solid",
        backgroundColor: "gray"
      }
    })
  script>
  <style>
    .ms-controller {
      display: none;
    }
  style>
head>

<body>
  <div>
    <div ms-controller="maincontainer">
      <div ms-for='(key,el) in @styleInfo'>
        <label>{{ key +':'+ el }}label>
        <input type="text" ms-duplex="@styleInfo[key]">
        
        <input type="text" ms-duplex="el">
      div>
    div>
  div>
body>

html>

页面效果:
Avalon 学习系列(四)—— 循环遍历_第3张图片

你可能感兴趣的:(#,Avalon,学习,javascript,数学建模)