模板语法:循环

• 使用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>