Vue 列表渲染之v-for指令

v-for指令 
                        1.用于展示列表数据
                        2.语法：v-for="(item, index) in xxx" :key="yyy"  index是遍历过程中的下标索引
                        3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body> 
        <!-- 准备好一个容器-->
        <div id="root">
            <h2>人员列表（全部展示出来）</h2>
            <ul>
                <!-- 使用v-for的时候必须使用 :key给元素设置一个唯一值-->
                <li v-for="p in persons"  :key="p.id">
                    {{p.name}}-{{p.age}}
                </li>
            </ul>


            <!-- 遍历数组 -->
            <h2>人员列表（遍历数组）</h2>
            <ul>
                <li v-for="(p,index) of persons" :key="index">
                    {{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="(number,index) of 5" :key="index">
                    {{index}}-{{number}}
                </li>
            </ul>
        </div>

        <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:'奥迪A8',
                        price:'70万',
                        color:'黑色'
                    },
                    str:'hello'
                }
            })
        </script>
</html>
复制代码

 

posted @   安静点--  阅读(147)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue之v-text指令
·  Vue之v-html指令
·  [Vue]列表渲染v-for
·  vue2 - 列表渲染
·  11 列表渲染-基本列表
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手