• 使用p-each进行循环操作

对一个元素使用p-each绑定一个数组，它的子元素会根据数组的内容进行循环。循环是在p-each元素的内部进行的，p-each元素本身不会改变

  <div p-each="list">
      <p>{{name}}</p>
  </div>
  <!-- 渲染后是
  <div p-each="list">
      <p>张三</p>
      <p>李四</p>
  </div>
  -->
  <script>
      var data = {
          list: [
              {name: '张三'},
              {name: '李四'}
          ]
      };
      $('div').vm(data);
  </script>

在p-each下，可以使用@self指代循环的对象本身，使用@index指代当前对象的索引值。

  <div p-each="list">
      <p>{{@index}}: {{@self}}</p>
  </div>
  <!-- 渲染后是
  <div p-each="list">
      <p>0: 张三</p>
      <p>1: 李四</p>
  </div>
  -->
  <script>
      var data = {
          list: [
              '张三',
              '李四'
          ]
      };
      $('div').vm(data);
  </script>

• 使用p-for进行循环操作

你也可以使用p-for进行循环操作，跟p-each不同的是，p-for是将元素本身进行循环输出，而不是它的子元素

  <select>
      <option value="0">请选择</option>
      <option p-for="list" p-bind="value: {{value}}">{{content}}</option>
  </select>
  <script>
      var data = {
          list: [
              {
                  value: 1,
                  content: '选项一'
              },
              {
                  value: 2,
                  content: '选项二'
              }
          ]
      };
      $('div').vm(data);
  </script>