zoukankan      html  css  js  c++  java
  • Vue学习(五):列表渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>
    <body>
    <!--1.数组迭代-->
    <div id="example1">
        <ul>
            <li v-for="item in items">
                {{ item.message }}
            </li>
        </ul>
        <!--第二个参数为索引-->
        <ul>
            <li v-for="(item, index) in items">
                {{ parentMessage }} - {{ index }} - {{ item.message }}
            </li>
        </ul>
    </div>
    
    <!--2.对象迭代-->
    <div id="example2">
        <!--第一个参数为属性值-->
        <ul>
            <li v-for="value in object">
                {{ value }}
            </li>
        </ul>
        <!--第二个参数为键名-->
        <ul>
            <li v-for="(value, key) in object">
                {{ key }}: {{ value }}
            </li>
        </ul>
        <!--第三个参数为索引-->
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }}.{{ key }}: {{ value }}
            </li>
        </ul>
    </div>
    
    <!--3.在使用 v-for 时提供 key-->
    <!--2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的-->
    <div id="example3">
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.message }}
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="vue.min.js"></script>
    <script>
        let vm1 = new Vue({
            el: '#example1',
            data: {
                parentMessage: 'Parent',
                items: [
                    {message: 'Foo'},
                    {message: 'Bar'}
                ]
            }
        });
    
        let vm2 = new Vue({
            el: '#example2',
            data: {
                object: {
                    firstName: 'John',
                    lastName: 'Doe',
                    age: 30
                }
            }
        });
    
        let vm3 = new Vue({
            el: '#example3',
            data: {
                items: [
                    {
                        id: 1,
                        message: 'Foo'
                    },
                    {
                        id: 2,
                        message: 'Bar'
                    }
                ]
            }
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    利用http协议实现图片窃取
    数字信号处理与音频处理(使用Audition)
    算法--堆排序学习以及模板
    HDInsight-Hadoop实战(一)站点日志分析
    自己动手写缓存Version1
    Xenomai 的模式切换浅析
    JSF学习四 标签
    chrome扩展——Postman
    CSS3:clip-path具体解释
    大型站点的前期规划
  • 原文地址:https://www.cnblogs.com/Jimc/p/10101981.html
Copyright © 2011-2022 走看看