Vue技术12.1基本列表

最新推荐文章于 2024-03-04 18:43:06 发布

yitahutu79

最新推荐文章于 2024-03-04 18:43:06 发布

阅读量93

点赞数

分类专栏：前端文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_40713201/article/details/126238336

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

本文演示了如何使用Vue.js的v-for指令遍历数组、对象、字符串和指定次数，展示了在HTML中渲染列表数据的基本方法。通过实例代码解释了v-for的语法，并提供了不同类型的示例数据，包括人员列表、汽车信息、字符串遍历和循环指定次数的用法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>>
<html>
    <head>
        <mata charset="UTF-8"/>
        <title>基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            v-for指令
            1.用于展示列表数据
            2.语法：v-for="（item，index） in xxx" := key="yyy"
            3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <!-- 遍历数组 -->
            <h2>人员列表</h2>
            <ul>
                <li v-for="p in persons" :key="p.id">{{p.name}} - {{p.age}}</li>
            </ul>
            <!-- 遍历对象 -->
            <h2>汽车信息</h2>
            <ul>
                <li v-for="(value,k) of car" :key="k">
                    {{k}} - {{value}}
                </li>
            </ul>
            <!-- 遍历字符串 -->
            <h2>测试遍历字符串</h2>
            <ul>
                <li v-for="(char, index) of str" :key="index">
                    {{char}} - {{index}}
                </li>
            </ul>
            <!-- 遍历指定次数 -->
            <h2>测试遍历指定次数</h2>
            <ul>
                <li v-for="(a,b) of 5">{{a}} - {{b}}</li>
            </ul>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001', name:'张三', age:18},
                    {id:'002', name:'李四', age:19},
                    {id:'003', name:'王五', age:20},
                ],
                car:{
                    name:'aodi',
                    price:'30000'
                },
                str:'hello'
            }
        })
    </script>
</html>