zoukankan      html  css  js  c++  java
  • Vue学习笔记5

    列表渲染

    v-for 把一个数组对应为一组元素

    <div id="app">
        <li v-for = "item in array">
            {{item.message}}
        </li>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                array:[
                    {message:'vue1'},
                    {message:'vue2'},
                    {message:'vue3'}
                ]
            },
        })
    </script>
    
    <div id="app">
        <li v-for = "item in array">
            {{item}}
        </li>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                array:[
                    'vue1',
                    'vue2',
                    'vue3'
                ]
            },
        })
    </script>
    

    结果:

    1.png

    v-for 还支持一个可选的第二个参数为当前项的索引。

    <div id="app">
        <ul id="example-2">
            <li v-for="(item, index) in items">
                {{ index }} - {{ item.message }}
            </li>
        </ul>
    </div>
    <script>
        var example2 = new Vue({
            el: '#example-2',
            data: {
                items: [
                    {message:'vue1'},
                    {message:'vue2'},
                    {message:'vue3'}
                ]
            }
        })
    </script>
    

    结果:
    2.png

    对象的 v-for
    可以用 v-for 通过一个对象的属性来迭代。

    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
    <script>
        new Vue({
            el: '#v-for-object',
            data: {
                object: {
                    o: 'vue1',
                    ob: 'vue2',
                    obj: 'vue3'
                }
            }
        })
    </script>
    

    结果:
    3.png

    <ul id="v-for-object" class="demo">
        <li v-for="(value,key) in object">
            {{key}}: {{ value }}
        </li>
    </ul>
    <script>
        new Vue({
            el: '#v-for-object',
            data: {
                object: {
                    obj1: 'vue1',
                    obj2: 'vue2',
                    obj3: 'vue3'
                }
            }
        })
    </script>
    

    结果:
    4.png

    <ul id="v-for-object" class="demo">
        <li v-for="(value,key,index) in object">
            {{index}}. {{key}}: {{ value }}
        </li>
    </ul>
    <script>
        new Vue({
            el: '#v-for-object',
            data: {
                object: {
                    obj1: 'vue1',
                    obj2: 'vue2',
                    obj3: 'vue3'
                }
            }
        })
    </script>
    

    结果:
    5.png

  • 相关阅读:
    面试题3(百思教育面试软件开发岗位笔试题)
    python开发工具安装
    涉及 委托事件 程序运行越来越慢
    整理收藏
    数据库作业创建
    剑指offer-面试题37:序列化二叉树及二叉树的基本操作和测试
    剑指offer-面试题41:数据流中的中位数
    快速排序及其优化
    冒泡排序算法及相应的优化
    leetcode问题:缺失数字
  • 原文地址:https://www.cnblogs.com/qfstudy/p/9317730.html
Copyright © 2011-2022 走看看