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

  • 相关阅读:
    1026 Table Tennis (30)
    1029 Median
    1025 PAT Ranking (25)
    1017 Queueing at Bank (25)
    1014 Waiting in Line (30)
    1057 Stack (30)
    1010 Radix (25)
    1008 Elevator (20)
    字母大小写转换
    Nmap的基础知识
  • 原文地址:https://www.cnblogs.com/qfstudy/p/9317730.html
Copyright © 2011-2022 走看看